is属性的用法vue

目录

1.用法

2.组件缓存

3.使xxx激活

---

1.用法

• 直接渲染组件

<div is='引入的组件名称'></div>

• 动态组件切换（常用）

<div :is='变量'></div>

​

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

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

<!-- 1、普通：当做标签元素去渲染 -->
<v-son></v-son>
​
<!-- 2、通过is属性去渲染组件，这个时候组件名就不用烤串写法 -->
<div is='vSon'></div>

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

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

// 引入子组件
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节点。因此就需要组件缓存。即将需要缓存的组件放入<keep-alive></keep-alive>中

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

3.使xxx激活

activated：激活的

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

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

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