vue3 怎么动态挂载组件

在 Vue 3 中，动态挂载组件的使用方式与 Vue 2 有些不同。具体实现步骤如下：

1. 创建多个组件，每个组件都需要指定一个 `name`，例如：

   <!-- ComponentA.vue -->
   <template>
     <div>
       <h1>Component A</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'ComponentA'
   }
   </script>

   <!-- ComponentB.vue -->
   <template>
     <div>
       <h1>Component B</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'ComponentB'
   }
   </script>

2. 在父组件中使用 `teleport` 标签，并且使用 `v-if` 或者 `v-show` 来控制是否渲染组件，例如：

   <template>
     <div>
       <button @click="toggleComponent">Toggle Component</button>
       <teleport to="body">
         <component v-bind:is="currentComponent" v-if="showComponent"></component>
       </teleport>
     </div>
   </template>
   
   <script>
   import { defineComponent, ref } from 'vue';
   import ComponentA from './ComponentA.vue';
   import ComponentB from './ComponentB.vue';
   
   export default defineComponent({
     name: 'ParentComponent',
     components: {
       ComponentA,
       ComponentB
     },
     setup() {
       const currentComponent = ref('ComponentA');
       const showComponent = ref(true);
   
       const toggleComponent = () => {
         currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA';
       }
   
       return {
         currentComponent,
         showComponent,
         toggleComponent
       }
     }
   });

在上面的例子中，我们使用 `teleport` 标签来实现组件的动态挂载。首先，我们在父组件中引入了 `ComponentA` 和 `ComponentB` 两个子组件，并且使用 `v-bind:is` 属性来绑定当前需要渲染的组件的名字，然后使用 `v-if` 或者 `v-show` 来控制是否渲染该组件。我们还定义了一个 `toggleComponent` 方法，用于在两个子组件之间切换。当用户点击 `Toggle Component` 按钮时，该方法会将 `currentComponent` 的值从 `ComponentA` 切换为 `ComponentB`，从而实现了动态挂载组件的效果。

需要注意的是，在 Vue 3 中，`v-if` 和 `v-show` 是不能直接用在 `component` 标签上的，需要使用 `teleport` 标签来实现。此外，Vue 3 中使用了 `ref` 来定义响应式变量，而不再使用 Vue 2 中的 `data` 属性。