is属性的用法vue

目录

1.用法

2.组件缓存

3.使xxx激活

---

1.用法

• 直接渲染组件

• 动态组件切换（常用）

​

data(){
    return {
        变量:'组件名称'
    }
}

我们注册的组件，有两种方式去渲染，普通和is属性渲染

​

但是，is属性通常用于渲染动态组件（选项卡），如下：

    子组件
    商品组件

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

2.组件缓存

keep-alive内置组件：组件缓存

keep：处理

alive：活跃的

当组件切换时，是类似于v-show还是类似于v-if？

我们在每个子组件中添加上挂载完成钩子函数

事实证明，类似于v-if，哪这就有个问题，如果组件的内容没有发生变化，我们不需要每次都重新加载DOM节点。因此就需要组件缓存。即将需要缓存的组件放入中

3.使xxx激活

activated：激活的

如果整个组件缓存了，但是该组件中某部分又不需要缓存，则可以使用activated使xxx被激活的钩子函数，它会每次都执行。即缓存了以后，mounted只执行一次，但是activated每次都会执行

注意：这个钩子函数，必须在缓存了之后才会有

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