vue动态组件is的两种用法

1、is属性通常用于渲染动态组件（选项卡）

<div>
    <button @click="comType='vSon'">子组件</button>
    <button @click="comType='vGoods'">商品组件</button>
</div>
<div :is="comType"></div>
<component :is="comType"></component>

// 引入子组件
import vSon from "./son.vue";
import vGoods from "./goods.vue";
export default {
    data() {
        return {
            comType: "vSon",
        };
    },
    components: {
        vSon,
        vGoods,
    },
};

2、keep-alive缓存组件

<!-- 组件的缓存 -->
<keep-alive>
    <div :is="comType"></div>
    <component :is="comType"></component>
</keep-alive>

3、缓存后产生activated生命周期，每次都会调用

activated() {
    // 使。。。激活  钩子函数
    console.log("激活了");
    // 如果某一部分内容不需要被缓存，可以放在这个函数中渲染
    this.timer = new Date().toLocaleTimeString();
}