vue3父组件调用动态子组件的方法

在Vue 3中，父组件可以通过`ref`来调用子组件的方法。`ref`是一个特殊的属性，用于在父组件中引用子组件的实例。以下是实现步骤和示例代码：

1. **在子组件中定义方法**：首先，在子组件中定义你需要父组件调用的方法。

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>这是一个子组件</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    childMethod() {
      console.log('子组件的方法被调用了');
    }
  }
}
</script>

2. **在父组件中使用`ref`引用子组件**：在父组件的模板中使用`ref`来引用子组件，并在父组件的脚本中通过`ref`来调用子组件的方法。

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
    <ChildComponent ref="childRef" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);

    const callChildMethod = () => {
      if (childRef.value) {
        childRef.value.childMethod();
      }
    };

    return {
      childRef,
      callChildMethod
    };
  }
}
</script>

在这个示例中，父组件通过`ref="childRef"`引用了子组件，并在按钮点击事件中调用了子组件的`childMethod`方法。