vue3 ref调用子组件方法

在 Vue 3 中，可以使用 `ref` 来引用子组件，并调用其方法。下面是一个示例：

首先，在父组件中使用 `ref` 引用子组件：

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

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

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

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

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

在上面的代码中，我们使用 `ref` 创建了 `childRef` 引用，并将其绑定到子组件上。

然后，在父组件中，我们定义了 `callChildMethod` 方法，该方法通过 `childRef.value.childMethod()` 调用子组件的 `childMethod` 方法。

最后，在模板中，我们可以通过点击按钮来触发 `callChildMethod` 方法，从而调用子组件的方法。

请注意，在 Vue 3 中，需要使用 `ref.value` 来访问 `ref` 的实际值。