目录
一、什么是动态组件
可以动态切换页面上组件的显示或隐藏
二、如何实现动态组件渲染
vue 提供了内置的 <component>组件,专门用来实现动态组件的渲染。
<button @click="name = 'Left'">显示 Left</button>
<button @click="name = 'Right'">显示 Right</button>
<div class="box">
<!-- 渲染 Left 组件和 Right 组件 -->
<!-- 1.component是vue内置的组件,本质上是一个占位符 -->
<!-- 2.is属性的值,表示要渲染的组件的名字。并且应该是在components节点下注册的名称。 -->
<!-- 3.keep-alive 是vue内置的属性,可以把内部的组件进行缓存,而不是销毁组件 -->
<!-- 在使用keep-alive 的时候,可以通过include指定哪些组件需要被缓存
或者通过 exclude指定哪些组件不需要被缓存;但是 不要同时使用include 和 exclude -->
<keep-alive exclude="Right">
<component :is="name"></component>
</keep-alive>
</div>
2. keep-alive 对应的生命周期函数
1)当组件被缓存时,会自动触发组件的deactivated 生命周期函数
组件被激活时候的,生命周期函数
当组件第一次被激活的时候,即会触发 created 生命周期函数,也会触发 activated生命周期函数
但是如果组件从缓存被激活的时候,只会触发 activated 生命周期函数,因为组件没有被重新创建
activated() {
console.log("组件被激活了, activated");
}
2)当组件被激活时,会自动触发组件的activated 生命周期函数
// 组件被缓存时候的,生命周期函数
deactivated() {
console.log("组件被缓存了,deactivated");
}
3. keep-alive 的 include 属性
include 属性用来指定:只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔
<keep-alive include="Left">
<component :is="name"></component>
</keep-alive>
4. keep-alive 的 exclude 属性
exclude 属性用来指定:除了选中的匹配的组件不会被缓存。多个组件名之间使用英文的逗号分隔
<keep-alive exclude="Right">
<component :is="name"></component>
</keep-alive>
5.组件的name 属性
当为组件提供了name 属性之后,组件的名称 就是 name 属性的值
export default {
name: 'MyLeft',
}
对比
1.组件的 “注册名称”的主要应用场景是:以标签的形式把注册好的组件渲染和使用到页面结构中
2.组件声明时候的"name" 名称主要应用场景:结合<keep-alive>标签 实现组件缓存功能;以及在调试工具中看到组件的name
<keep-alive exclude="MyRight">
<component :is="name"></component>
</keep-alive>