目录
一、什么是动态组件
可以动态切换页面上组件的显示或隐藏
二、如何实现动态组件渲染
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>