vue3 子组件调用父组件有返回值的方法

在Vue 3中，子组件调用父组件有返回值的方法可以通过使用`$emit`和回调函数来实现。下面是一个示例：

父组件：

<template>
  <div>
    <ChildComponent @callback="handleCallback"></ChildComponent>
    <p>返回值：{{ returnValue }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const returnValue = ref('');

    const handleCallback = (value) => {
      returnValue.value = value;
    };

    return {
      returnValue,
      handleCallback
    };
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="callParentMethod">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  emits: ['callback'],
  methods: {
    callParentMethod() {
      const value = '返回的值';
      this.$emit('callback', value);
    }
  }
};
</script>

在上面的示例中，父组件通过`@callback`监听子组件触发的`callback`事件，并将返回的值赋给`returnValue`。子组件通过`this.$emit`触发`callback`事件，并将返回的值作为参数传递给父组件。