动态组件

• 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 标签选项切换，不同选项展示不同组件。
• 插件和扩展，根据用户的配置来动态地加载和切换不同的组件。