动态组件
1. 什么是动态组件
动态组件指的是动态切换组件的显示与隐藏
。
2. 如何实现动态组件渲染
vue 提供了一个内置的 <component>
组件,专门用来实现动态组件的渲染
。示例代码如下:
data() {
// 当前要渲染的组件名称
return {
comName: 'Right'
}
}
<!-- componet 标签是vue 内置的作用: 组件的占位符 -->
<!-- is 属性的值,表示要渲染的组件的名字 -->
<component :is="comName"></component>
<button @click="comName = 'Left'">展示 Left</button>
<button @click="comName = 'Right'">展示 Right</button>
3. 使用 keep-alive 保持状态
默认情况下,切换动态组件时无法保持组件的状态
。此时可以使用 vue 内置的 keep-alive
组件保持动态组
件的状态。示例代码如下:
<!-- keep-alive 可以把内部的组件进行缓存,而不是销毁组件 -->
<keep-alive>
<component :is="comName"></component>
</keep-alive>
4. keep-alive 对应的生命周期函数
当组件被缓存
时,会自动触发组件的deactivated
生命周期函数。
当组件被激活
时,会自动触发组件的 activated
生命周期函数。
export default {
created() {
console.log('left 组件被创建了')},
destroyed() {
console.log('left 组件被销毁了')},
activated() {
console.log('组件被激活了,activated')},
deactivated() {
console.log('组件被缓存了,deactivated')}
}
5. keep-alive 的 include 属性
include 属性用来指定:只有名称匹配的组件
会被缓存。多个组件名之间使用英文的逗号
分隔:
<!-- 在使用 keep-alive 的时候, 可以通过 include 指定哪些组件需要被缓存 -->
<!-- 或者, 可以通过 exclude 指定哪些组件不需要被缓存 不能同时使用两者-->
<keep-alive include="Left,Right">
<component :is="comName"></component>
</keep-alive>