vue3异步引入组件，如何调用组件方法

在Vue3中，如果你需要异步导入并动态加载某个组件，并且想要在组件加载完成后再调用其中的方法，你可以使用`async setup()`函数配合`ref()`和`onMounted()`钩子。以下是步骤：

1. 首先，在父组件的模板里，通过`<template>`标签动态地引用一个占位符或者`v-if`条件来等待组件加载：

<template>
  <div v-if="isLoaded">
    <component :is="currentComponent" ref="myComponent"></component>
  </div>
</template>

2. 然后，在`setup()`函数内部，使用`import.meta.glob`来异步导入组件，这个API可以让你动态获取文件名并返回一个Promise：

import { onMounted, ref } from 'vue';

export default {
  async setup() {
    const currentComponent = ref(null);
    const isLoaded = ref(false);

    // 异步加载组件
    const loadComponent = async (name) => {
      try {
        const component = await import.meta.glob(`./components/${name}.*`);
        if (component.default) {
          currentComponent.value = component.default;
        }
      } catch (_) {
        console.error('Failed to load component');
      }
      isLoaded.value = true; // 当组件加载成功时设置为true
    };

    // 初始化组件，这里假设你想从'ChildComponent.vue'开始加载
    await loadComponent('ChildComponent');

    // 使用onMounted确保在组件加载完成后调用方法
    onMounted(() => {
      if (currentComponent.value && typeof currentComponent.value.methodToCall === 'function') {
        currentComponent.value.methodToCall(); // 调用组件内的方法
      }
    });

    return { currentComponent, isLoaded };
  },
};