【Vue3】动态组件

在Vue 3中，可以使用<component>元素作为动态组件，并使用is特性来决定要渲染哪个组件。

例如，假设有三个组件ComponentA.vue、ComponentB.vue和ComponentC.vue，你可以这样使用它们：

<template>
  <div>
    <!-- 动态组件，:is绑定到当前组件名 -->
    <component :is="currentComponent"></component>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';
 
export default {
  setup() {
    // 使用ref来响应式地变更当前组件
    const currentComponent = ref('ComponentA');
 
    // 方法来切换组件
    function switchComponent(componentName) {
      currentComponent.value = componentName;
    }
 
    // 返回到模板中使用
    return {
      currentComponent,
      switchComponent,
    };
  },
  components: {
    ComponentA,
    ComponentB,
    ComponentC,
  },
};
</script>

在上面的例子中，currentComponent是一个响应式引用，它的值可以在setup函数中改变，从而动态地更新<component>元素所渲染的内容。switchComponent方法用于改变currentComponent的值，从而显示不同的组件。

你可以通过事件或其他逻辑来触发switchComponent方法，并传递不同的组件名称字符串来实现组件的切换。