vue3中父组件执行子组价的方法

在Vue 3中，父组件可以通过使用 `ref` 或 `provide/inject` 的方式来执行子组件的方法。

方法1：使用 `ref`

在父组件中，可以使用 `ref` 来创建对子组件的引用，并通过这个引用来执行子组件的方法。

<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="executeChildMethod">执行子组件方法</button>
  </div>
</template>

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

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

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

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

在上面的例子中，父组件首先通过 `ref` 创建了一个对子组件的引用 `childRef`。然后，通过点击按钮触发 `executeChildMethod` 方法，在该方法中调用了子组件的方法 `childMethod()`。

方法2：使用 `provide/inject`

另一种方法是通过 `provide` 和 `inject` 来传递子组件的方法到父组件中。

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="childMethod()">子组件方法</button>
  </div>
</template>

<script>
export default {
  setup() {
    const childMethod = () => {
      console.log('执行子组件方法');
    };

    return {
      childMethod
    };
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="executeChildMethod">执行子组件方法</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childMethod = inject('childMethod');

    const executeChildMethod = () => {
      childMethod();
    };

    return {
      executeChildMethod
    };
  }
};
</script>

在上面的例子中，子组件通过 `setup` 函数中的 `childMethod` 使用 `provide` 来提供子组件的方法。然后，在父组件中使用 `inject` 来获取子组件的方法，并在执行方法的时候调用它。

这两种方法都可以实现父组件执行子组件的方法，你可以根据具体的场景选择适合你的方式。