vue 3组件动态将import的子组件添加到组件中

在 Vue 3 中，可以使用 `import()` 函数动态加载子组件，然后通过 `defineAsyncComponent` 函数定义异步组件，最后在父组件中动态引用该异步组件并将其添加到父组件中。具体实现可以参考以下代码示例：

<template>
  <div ref="container"></div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  mounted() {
    this.loadChildComponent();
  },
  methods: {
    async loadChildComponent() {
      const ChildComponent = await import('./ChildComponent.vue');
      const asyncComponent = defineAsyncComponent(ChildComponent);
      this.$refs.container.appendChild(asyncComponent);
    }
  }
}
</script>

在上述代码中，我们在组件的 `template` 中定义了一个 `div`，并使用 `ref` 指令给它命名为 `container`。然后在组件的 `mounted` 生命周期钩子中调用 `loadChildComponent` 方法。该方法中使用 `import()` 函数动态加载子组件 `ChildComponent.vue`，然后使用 `defineAsyncComponent` 函数定义异步组件 `asyncComponent`。最后，我们将 `asyncComponent` 添加到 `container` 中，以动态将子组件添加到父组件中。

需要注意的是，`defineAsyncComponent` 函数需要接收一个返回 `Promise` 对象的函数作为参数，该函数会在组件被实例化时调用，返回一个 `Promise` 对象，表示异步组件的定义。因此，在上述代码中，我们将使用 `import()` 函数动态加载子组件，并将其返回的 `Promise` 对象作为参数传递给 `defineAsyncComponent` 函数。