vue3子组件定义方法给父组件使用

在Vue 3中，子组件可以通过定义ref来将自己的方法暴露给父组件使用。具体步骤如下：

1. 在子组件中，使用`ref`函数定义一个ref属性，并将方法赋值给该属性。例如，将子组件的方法`childMethod`暴露给父组件使用：

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

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

export default {
  setup() {
    const childMethod = () => {
      console.log('子组件的方法被调用了');
    };

    const childMethodRef = ref(childMethod);

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

2. 在父组件中，使用`ref`函数创建一个ref属性，并通过`$refs`访问子组件的ref属性。然后，就可以调用子组件的方法了。例如，在父组件的方法`parentMethod`中调用子组件的方法`childMethod`：

<template>
  <div>
    <!-- 父组件的模板内容 -->
    <button @click="parentMethod">调用子组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    parentMethod() {
      this.$refs.childComponentRef.childMethodRef.value();
    }
  }
};
</script>

在上述代码中，`childComponentRef`是子组件的ref属性，`childMethodRef`是子组件方法的ref属性。通过`this.$refs.childComponentRef.childMethodRef.value()`可以调用子组件的方法。