Vue动态组件

1.什么是动态组件

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

2. 如何实现动态组件渲染

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

• <component> 组件作用：相当于占位符
• is 属性的值：表示要渲染的组件的名字，应当是 components下注册的组件名

<button @click="comName = 'Left' ">展示 Left</button>
<button @click="comName = 'Right' ">展示 Right</button>
<div class="box">
    <component  :is="comName"></component>
</div>

export default {
    components: {
        Left,
        Right,
    },
    data() {
        return {
            // comName 表示要展示的组件的名字
            comName: 'Left'
        }
    }
}

3. 使用 keep-alive 保持状态

• 每次切换 component 内的组件都会重新创建销毁

• 可以使用 <keep-alive> 来保存状态，不会销毁组件也不会重新创建，会被缓存或者激活

• 使用：

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

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

• 当组件被缓存的时候，会自动触发组件的 deactivated 生命周期函数
• 当组件被激活的时候，会自动触发组件的 activated 生命周期函数
• 当组件第一次被创建的时候，先触发 created，再触发 activated
• 之后被激活时只触发 activated，不再触发 created

export default {
    created(){
        console.log('Left 被创建')
    },
    destroyed(){
        console.log('Left 被销毁')
    },
    deactivated(){
        console.log('Left 组件被缓存')
    },
    activated(){
        console.log('Left 组件被激活')
    },
}

5. keep-alive 的 include 属性

• include 用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔。
• exclude 属性指定谁不被缓存，二者只能指定一个。

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

6. 了解组件注册名称和组件声明时name的区别

• 当提供了 name 属性之后，组件的名称就是 name 属性的值
• 组件的注册名称是为了在页面中按标签形式使用
• 组件声明时候的 name 名称在调试工具中可以看到，在指定是否缓存也是根据name名称