动态组件

动态组件指的是动态切换组件的显示与隐藏

如何实现动态组件渲染

vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染,示例代码如下:

data() {
    // 当前要渲染的组件名称
    return { comName: 'Left' }
}

<!-- 通过 is 属性 动态指定要渲染的组件 -->
<component :is="comName"></component>

<!-- 点击按钮 动态切换组件的名称 -->
<button @click="comName = 'Left'">展示 Left 组件</button>
<button @click="comName = 'Right'">展示 Right组件</button>

使用keep-alive保持状态

在 component 标签中的组件会被动态的创建和销毁,此时组件中的数据会在再次创建时被重置

此时使用 vue 内置的 keep-alive 标签可以让其中的标签被缓存在内存中,不会被销毁

代码示例:

<keep-alive>
	<component :is="comName"></component>
</keep-alive>

通过这种方式缓存的标签,在 vue 调试台中能看到有 inactive 的标识

keep-alive对应的生命周期函数

当组件被缓存时,会自动触发组件的 deactivated 生命周期函数

当组件被激活时,会自动触发组件的 activated 生命周期函数

代码示例:

// 当组件第一次被创建的时候 既会执行 created 也会执行 activated
// 但是 组件被激活的时候 只会触发 activated 不再触发 created 因为组件没有被重新创建
activated() {
	console.log('组件被激活了');
},
deactivated() {
	console.log('组件被缓存了');
}

事件可以定义在与 created 函数同级的位置

keep-alive的include属性

include 属性用来指定: 只有名称匹配的组件会被缓存,多个组件名之间使用英文的逗号分隔

<keep-alive include="MyLeft,MyRight">
	<component :is="comName"></component>
</keep-alive>

include 内的组件只有一个能被缓存 

keep-alive的exclude属性

exclude 属性用来指定: 只有指定的组件被排除,即不会被缓存,其余组件则会被缓存

<keep-alive exclude="Right">
	<component :is="comName"></component>
</keep-alive>

exclude 与 include 只能二选一,不能同时使用

组件的名称name属性

export default {
	// 当提供了 name 属性之后 组件的名称 就是 name 属性的值
	// 对比
	// 组件的"注册名称" 主要应用场景: 以标签的形式 把注册好的组件 渲染和使用到页面结构中
	// 组件声明时候的"name"名称的主要应用场景 结合 keep-alive 标签实现组建的缓存功能 以及在调试工具中看到组建的 name 名称
	name: 'MyRight'
}

当在组件中定义了 name 属性后,在其他组件用到组件名时需要使用组件的 name 属性定义的名称