vue3父组件调子组件的方法

在 Vue 3 中，父组件可以通过使用 `ref` 或 `reactive` 来创建一个可响应的对象，并将其传递给子组件。子组件可以通过接收该对象作为 prop，并在自己的逻辑中调用该对象的方法。

下面是一个示例，展示了父组件如何调用子组件的方法：

<template>
  <div>
    <ChildComponent :childMethods="childMethods" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childMethods = ref(null);

    const callChildMethod = () => {
      if (childMethods.value) {
        childMethods.value.someMethod(); // 调用子组件的方法
      }
    };

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

在上面的示例中，父组件创建了一个 `childMethods` 的 ref 对象，并将其作为 prop 传递给子组件 `ChildComponent`。当父组件点击按钮时，会调用 `callChildMethod` 方法，该方法会检查 `childMethods.value` 是否存在，