【vue2】05_动态组件 & 插槽 & 自定义指令

动态组件

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>