Vue中什么是动态组件

让多个组件使用同一个挂载点，并动态切换，这就是动态组件

简单的说，动态组件就是将几个组件放在一个挂载点下，这个挂载点就是标签，其需要绑定is属性，属性值为父组件中的变量，变量对应的值为要挂载的组件的组件名，然后根据父组件里某个变量来动态显示哪个，也可以都不显示，如:

<template>
  <div class="home">
      <component :is="currentComponent"></component>
  </div>
</template>
<script>
import Tab0 from "@/components/Tab0.vue";
import Tab1 from "@/components/Tab1.vue";
export default {
     
    data: () => {
     
        return {
     
            currentIndex: 0 // 通过改变currentIndex改变要挂载的组件名
        }
    },
    components: {
     
        "tab-0": Tab0,
        "tab-1": Tab1
    }
    currentComponent() {
      // 动态计算要挂载的组件的组件名
      return `tab-${
       this.currentIndex}`; // "tab-0" 、"tab-1"
    }
}
</script>

缓存

• 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中
• 可以将动态组件放到组件内对动态组件进行缓存，这样动态组件进行切换的时候，就不会每次都重新创建了。

<template>
  <div class="home">
     <keep-alive>
          <component :is="currentComponent"></component>
     </keep-alive>
  </div>
</template>