动态组件

• component标签、solt标签、template标签 拥有相似的组件特性，但它们在渲染上存在差异。
• component会被编译掉，则不会存在该标签组件。

使用案例

<template>
  <div>
    <!-- 绑定渲染组件 -->
    <component :is="asycnComponent"></component>
    <!-- 切换组件 -->
    <button @click="getComponent">切换组件</button>
  </div>
</template>

<script setup lang="ts">
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
const  asycnComponent = ref(null)
const getComponent = (name: string) => {
  if(Math.random() > 0.5) {
    asycnComponent.value = ComponentA
  }else{
    asycnComponent.value = ComponentB
  }
}
</script>

业务场景

• 响应式页面切换，不同条件下返回不同页面组件。
• Vue-router路由切换组件,原理也是动态组件。
• tap标签选项切换，不同选项展示不同组件。
• 插件和扩展，根据用户的配置来动态地加载和切换不同的组件。