vue3 component is 绑定动态创建的组件

<template>
  <component :is="currentComponent" />
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA', // 初始组件为 ComponentA
    };
  },
  methods: {
    changeComponent(newComponent) {
      this.currentComponent = newComponent;
    }
  },
  components: {
    ComponentA: {
      template: '<div>This is Component A</div>'
    },
    ComponentB: {
      template: '<div>This is Component B</div>'
    }
  }
};
</script>

解释说明：

1. <component :is="currentComponent">:

   • 使用 Vue 的动态组件功能，通过 :is 绑定一个变量 currentComponent 来决定渲染哪个组件。

2. data():

   • 在 data 中定义了一个 currentComponent 变量，默认值为 'ComponentA'，表示初始渲染的组件是 ComponentA。

3. methods:

   • 定义了一个 changeComponent 方法，用于更改 currentComponent 的值，从而切换显示的组件。

4. components:

   • 注册了两个局部组件 ComponentA 和 ComponentB，每个组件都有一个简单的模板。

通过这种方式，你可以根据需要动态地创建和切换不同的组件。