在vue3动态切换组件

在Vue 3中动态切换组件非常简单。使用Vue的条件渲染指令(v-if / v-else-if / v-else)和动态组件即可实现。

首先，在vue组件中定义一个变量来决定要渲染的组件。例如，我们创建了一个`componentName`变量，初始值为`ComponentA`。

然后，在模板中使用`<template>`元素来包围动态组件，并使用v-if指令根据`componentName`的值来决定渲染哪个组件。

示例代码：

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <template v-if="componentName === 'ComponentA'">
      <component-a></component-a>
    </template>
    <template v-else-if="componentName === 'ComponentB'">
      <component-b></component-b>
    </template>
    <template v-else>
      <component-c></component-c>
    </template>
  </div>
</template>

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

export default {
  components: {
    ComponentA,
    ComponentB,
    ComponentC
  },
  data() {
    return {
      componentName: 'ComponentA'
    }
  },
  methods: {
    toggleComponent() {
      if (this.componentName === 'ComponentA') {
        this.componentName = 'ComponentB'
      } else if (this.componentName === 'ComponentB') {
        this.componentName = 'ComponentC'
      } else {
        this.componentName = 'ComponentA'
      }
    }
  }
}
</script>

在上述示例代码中，我们定义了三个组件`ComponentA`、`ComponentB`和`ComponentC`。点击"切换组件"按钮时，`toggleComponent`方法会更新`componentName`的值，从而动态改变渲染的组件。

上述方法可以用于在Vue 3中动态切换组件。