13-动态组件

什么是动态组件

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

如何实现动态组件渲染

vue 提供了一个内置的 组件，专门用来实现动态组件的渲染。示例代码如下：

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
    <button @click="comName = 'Left'">展示 Left</button>
    <button @click="comName = 'Right'">展示 Right</button>
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 1.component 标签是 vue 内置的，作用：组件的占位符 -->
      <!-- 2. is 属性的值，表示要渲染的组件名字 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
  data(){
    return {
      // 表示要展示组件的名称
      comName:'Left'
    }
  },
  components:{
    Left,
    Right
  }
}
</script>

注意：从Left切换到Right时，Left组件会被销毁 Right会被创建，所以他们的状态不会保持原有状态

使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组 件的状态。示例代码如下：

      <!-- keep-alive 可以把内部的组件进行缓存，而不是销毁 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>

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

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

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

keep-alive 的 include 和 exclude 属性

• include 属性用来指定：指定哪些组件会被缓存。多个组件名之间使用英文的逗号分隔：

• exclude 属性用来指定：被指定的组件不会被缓存

• 注意：不能同时使用 include 和 exclude 这两个属性

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