Vue3动态组件的基本用法

 和Vue2动态组件写法不同的是，:is传递的内容需要先定义，再给:is使用

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

<script setup>
import MyComponent from './MyComponent.vue';

const currentComponent = MyComponent;
</script>

动态切换组件

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

<script setup>
import MyComponent from './MyComponent.vue';
import OtherComponent from './OtherComponent.vue';

const currentComponent = ref(MyComponent);

// 假设你有一个方法来切换组件
function toggleComponent() {
  currentComponent.value = currentComponent.value === MyComponent ? OtherComponent : MyComponent;
}
</script>