Vue2 动态组件

1.什么是动态组件

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

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

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

         

<template>
  <div id="app">
    <h1>App.vue根组件</h1>
    <hr />
    <!-- 3.点击按钮，动态切换组件的按钮 -->
    <button @click="comName = 'Left'">展示Left组件</button>
    <button @click="comName = 'Right'">展示Right组件</button>
    <div class="box">
      <!-- 渲染Left组件和Right组件 -->
      <!-- 1. component标签是vue内置的 作用：组件的占位符 -->
      <!-- 2. is属性的值，表示要渲染的组件的名字 -->
      <!-- 3. is属性的值，应该是组件在components节点下的注册名称 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";
export default {
  data() {
    return {
      //1.当前要渲染的组件名称
      comName: "Left",
    };
  },
  methods: {},
  components: {
    Left,
    Right,
  },
};
</script>

<style lang="less" scoped>
</style>

3.使用keep-alive保持状态

        keep-alive可以把内部的组件进行缓存，而不是销毁组件

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

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

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

       当组件第一次被创建时，即会执行created生命周期，也会执行activate生命周期；

        当组件被激活时，只会触发activated生命周期，不会触发created，因为组件没有重新创建。

5.keep-alive的include属性

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

<keep-alive include="MyLeft,MyRight">
    <component :is="comName"></component>
</keep-alive>

在使用keep-alive的时候，可以通过include指定哪些组件需要被缓存；或者，通过exclude属性指定哪些组件不需要被缓存；切记：include和exclude不能同时使用!!!

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

当提供了name属性之后，组件的名称，就是name属性的值

 对比：

      1. 组件的“注册名称”的主要应用场景是：以标签的形式，把注册好的组件，渲染和使用到页面结构中。

      2. 组件声明时候的"name"名称的主要应用场景：结合<keep-alive>标签实现组件缓存功能；以及在调试工具中看到组件的name名称。