【vue学习笔记】四、动态组件&插槽&自定义组件

四、动态组件&插槽&自定义组件

1）动态组件

1.动态组件的使用

vue提供了一个内置的<component>组件，用来实现组件的动态渲染

is属性里的值表示要渲染的组件的名字

<component is="Left"></component>

2.keep-alive

在给is赋值切换组件的时候，会把旧的组件销毁再创建新的组件，如果想要组件不被销毁，则可以使用<keep-alive>标签将<component>包裹，此时切换组件会把旧组件进行缓存，而不是销毁组件

<keep-alive>
<component is="Left"></component>
</keep-alive>

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

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

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

当组件第一次被创建的时候，既会执行created生命周期，也会执行activated生命周期

当组件被激活时，只会触发activated

4.keep-live的include与exclude属性

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

<keep-alive include="Left,Right">
<component is="Left"></component>
</keep-alive>

exclude则用来排除不需要被缓存的组件，使用方法与include一致，两个属性不能同时使用

5.组件的名称

如果在声明组件的时候，没有为组件指定name名称，则组件的名称默认就是注册时候的名称

如果在组件内部创建了name属性，组件的名称就是name属性的值（与data平级&#x