Vue3中使用component :is 加载组件

在 Vue 3 中，你可以使用 `component :is` 属性来动态加载组件。这样可以根据需要在运行时决定要渲染的组件。

首先，你需要在父组件中准备好所有可能被加载的子组件。然后，通过在 `<component>` 标签中使用 `:is` 属性来指定要渲染的组件。

下面是一个简单的示例：

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

<script>
import ChildComponent1 from './ChildComponent1.vue'
import ChildComponent2 from './ChildComponent2.vue'

export default {
  data() {
    return {
      currentComponent: null
    }
  },
  mounted() {
    // 在某个事件或条件触发时，根据需要选择要渲染的组件
    this.currentComponent = ChildComponent1
    // 或者：this.currentComponent = ChildComponent2
  },
  components: {
    ChildComponent1,
    ChildComponent2
  }
}
</script>

在上面的示例中，`ChildComponent1` 和 `ChildComponent2` 是你要动态加载的两个子组件。在 `mounted` 钩子函数中，你可以根据需要将 `this.currentComponent` 设置为你想要加载的组件。

通过这种方式，你可以根据不同的条件或事件动态加载不同的组件。