Vue3子组件调用父组件方法并获取返回值

在Vue3中，子组件要想调用父组件的方法并获取返回值，可以使用`ref`、自定义事件或者`$emit`/$on`对等机制。

1. **使用props** (推荐)：
如果父组件希望将数据传递给子组件，并通过方法返回，可以通过`props`进行通信。子组件通过`methods`定义一个方法，然后在需要的地方调用这个方法，并设置`this.$emit('parentMethod', 参数)`触发事件。父组件监听这个事件，接收返回值。

// 父组件
<template>
  <div>
    <child-component :returnData="parentReturn" @parentMethod="handleParentResult"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentResult(result) {
      this.parentReturn = result;
    }
  }
};
</script>

2. **自定义事件 (v-on:custom-event)** 或者 `@emit`:
子组件直接通过`this.$emit('customEvent', 返回值)`发出事件，父组件则通过`v-on:custom-event`或者`@customEvent="handleResult"`来监听并处理这个事件。

// 子组件
<template>
  <button @click="callParentMethod">Call Parent Method</button>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      const result = ...; // 这里计算返回值
      this.$emit('customEvent', result);
    }
  }
};
</script>

3. **ref 和 props 的组合**:
子组件可以用`ref`定义一个本地变量，然后将其暴露出去作为prop。父组件可以在方法内部修改这个变量，子组件通过`props`监听这个变化。

// 父组件
<template>
  <div>
    <child-component :parentValue="valueRef" @updateFromChild="updateFromChild"></child-component>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const valueRef = ref(null);
    ...
    methods: {
      updateFromChild(value) {
        valueRef.value = value;
      }
    }
  }
};
</script>