# 动态组件

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

# 如何实现动态组件渲染

vue 提供了一个内置的组件，专门用来实现动态组件的渲染.

1
2
3
4
5
6
7
8

data() {
    return {comName: 'Left'}
}

<component :is="comName"></component>

<button @click="comName= 'Left'">显示Left组件</button>
<button @click="comName = 'Right'">显示Right组件</button>

• component 标签是 vue 内置的组件占位符
• is 属性的值，表示要渲染的组件的名字
• is 属性的值，是组件在 components 节点下的注册名称

# keep-alive 的使用

当 component 节点中组件切换时，原来的组件被销毁，新的组件被生成，所以组件内部的 data 值会在下次生成的时候恢复初始值。如果要保存状态的话，则需要 keep-alive 节点

keep-alive 可以把内部的组件进行缓存

1
2
3

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

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

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

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

1
2
3
4
5
6

deactivated() {
    console.log('Left组件被缓存')
},
activated() {
    console.log('Left组件被激活')
}

# keep-alive 的 include, exclude 属性

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

exclude 属性相反：名称匹配的组件不会被缓存

1
2
3
4
5
6
7
8

<div class="box">
    <keep-alive include="Left" exclude="Right">
        <component :is="comName"></component>
	</keep-alive>
</div>
<button @click="comName = 'Left'">显示Left组件</button>
<button @click="comName = 'Right'">显示Right组件</button>

# 组件注册名称和组件声明名称的区别

• 如果在声明组件的时候，没有为组件指定 name 名称，则组件的名称默认就是注册时候的名称
• 当声明组件的时候提供了 name 属性，组建的名称就是 name 属性的值
• 注册组件时的名称用于以标签的形式使用
• name 属性主要应用场景：结合标签实现组件缓存功能，以及在调试工具中看到组件的 name 名称