vue3 component动态生成的子组件 怎么调用子组件的方法

如果你在 Vue 3 中动态生成了子组件，并想调用这些动态生成的子组件的方法，你可以使用 `ref` 和 `onMounted`。

首先，在父组件中，你需要使用 `ref` 创建一个数组来存储动态生成的子组件的引用。然后，在 `onMounted` 钩子函数中，可以访问这些引用并调用子组件的方法。

下面是一个示例：

<template>
  <div>
    <button @click="addDynamicComponent">添加动态子组件</button>
    <div v-for="componentRef in dynamicComponents" :key="componentRef.id">
      <component :is="componentRef.component" ref="componentRef.ref"></component>
      <button @click="callChildMethod(componentRef.ref)">调用子组件方法</button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const dynamicComponents = ref([]);

    const addDynamicComponent = () => {
      dynamicComponents.value.push({
        component: ChildComponent,
        ref: ref(null)
      });
    };

    const callChildMethod = (ref) => {
      ref.value.childMethod(); // 调用子组件方法
    };

    onMounted(() => {
      dynamicComponents.value.forEach((componentRef) => {
        componentRef.ref.value = componentRef.ref; // 将 ref 绑定到实际的子组件上
      });
    });

    return {
      dynamicComponents,
      addDynamicComponent,
      callChildMethod
    };
  }
};
</script>

在上面的代码中，我们使用 `ref` 创建了一个名为 `dynamicComponents` 的数组，用于存储动态生成的子组件的引用。每次点击 "添加动态子组件" 按钮时，我们将子组件的构造函数和引用添加到数组中。

在模板中，我们使用 `v-for` 遍历 `dynamicComponents` 数组，并使用 `component` 动态地渲染子组件。通过点击 "调用子组件方法" 按钮时，我们调用 `callChildMethod` 方法，并将对应的子组件引用作为参数传递进去。

在 `onMounted` 钩子函数中，我们将实际的子组件引用绑定到 `dynamicComponents` 数组中的每个元素的 `ref` 属性上。

通过以上步骤，你就可以在动态生成的子组件中调用它们的方法了。

希望这可以帮助到你！如果有任何进一步的问题，请随时提问。