vue3动态组件component

<template>
  <div>
    <!-- 动态组件使用 v-bind 绑定 is 属性 -->
    <component :is="currentComponent" />

    <!-- 切换组件的按钮 -->
    <button @click="currentComponent = 'ComponentA'">显示组件 A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件 B</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      // 当前显示的组件名称
      currentComponent: 'ComponentA'
    };
  }
};
</script>

解释说明

1. 动态组件：<component :is="currentComponent" /> 使用 v-bind 的 is 特性来动态切换渲染的组件。currentComponent 是一个数据属性，它决定了当前渲染哪个组件。

2. 组件注册：在 components 选项中注册了 ComponentA 和 ComponentB 两个子组件。

3. 切换逻辑：通过按钮点击事件来改变 currentComponent 的值，从而实现动态切换组件的效果。

4. 数据绑定：currentComponent 是一个响应式数据属性，默认值为 'ComponentA'，表示初始时会渲染 ComponentA。

如果你需要更多关于 Vue 3 动态组件的详细信息或有其他问题，请随时告诉我！