vue3如何动态import <component :is=

在Vue3中，如果你想通过动态导入并在运行时动态切换组件，可以使用`<component>`元素结合`v-bind:`指令，尤其是当你想基于数据变化来改变当前渲染的组件时。这种情况下，你可能会看到类似这样的代码：

<template>
  <div>
    <button @click="changeActiveComponent">切换组件</button>
    <component v-bind:is="activeComponent"></component>
  </div>
</template>

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

let activeComponent = 'ComponentA'; // 初始状态

function changeActiveComponent() {
  if (activeComponent === 'ComponentA') {
    activeComponent = 'ComponentB';
  } else {
    activeComponent = 'ComponentA';
  }
}

// 如果你想使用动态导入，可以用async/await配合import()
async function importComponent(componentName) {
  await import(`./${componentName}.vue`).then((module) => {
    window[componentName] = module.default;
  });
}
</script>

<!-- 这里假设ComponentA和ComponentB已经导出为默认导出 -->
<button @click="importComponent('ComponentB')">导入并显示ComponentB</button>

在上面的例子中，`changeActiveComponent`函数根据`activeComponent`的状态动态切换渲染的组件。如果要用到动态导入，可以先调用`importComponent`函数，在导入完成后更新全局变量，并设置对应的组件。