vue3setup子组件暴露方法

在Vue 3中，可以使用`ref`和`toRefs`函数来暴露子组件的方法。首先，在子组件中定义一个`ref`变量来存储要暴露的方法，然后通过`toRefs`函数将该变量转换为响应式对象，从而将其暴露给父组件。

下面是一个示例代码：

<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

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

export default {
  setup() {
    // 定义要暴露的方法
    const myMethod = () => {
      console.log('子组件方法被调用');
    };

    // 使用toRefs将myMethod转换为响应式对象
    return {
      ...toRefs(refs)
    };
  },
};
</script>

在父组件中，可以通过在子组件上绑定`ref`来访问子组件的方法。例如：

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

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

export default {
  setup() {
    // 创建子组件引用
    const childRef = ref(null);

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

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

这样，通过`childRef`引用就可以在父组件中调用子组件的暴露方法了。