Vue3 defineEmits 获取emit执行后的返回值

在Vue3中，emit 执行后，是无法直接获取到返回值的。
先看代码：
index.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
const sendMsg = (text) => {
  console.log(text)
  return '发送成功!'
}
</script>

<template>
  <header>
    <HelloWorld @msg="sendMsg" />
  </header>
</template>

HelloWorld.vue

<template>
  <button @click="sendMsg"> {{ buttonText }}</button>
</template>
<script  setup>
import { ref } from 'vue'
const buttonText = ref('发送')
const sendMsg = () => {
  const result = emits('msg','hello')
  console.log('result:', result)
  buttonText.value = result
}
const emits = defineEmits(['msg'])
</script>

在子组件HelloWorld中，我们的目的是当点击 button 按钮时，获取emits 的返回值，然后按钮显示 发送成功, 但是取到的是 undefined，因为vue3就不支持这种写法。

那我们要怎么获取 emit的返回值呢？其实我们可以借助一个callback 函数，来进行取值。
HelloWorld.vue

<template>
  <button @click="sendMsg"> {{ buttonText }}</button>
</template>
<script  setup>
import { ref } from 'vue'
const buttonText = ref('发送')
const sendMsg = () => {
  let result = ''
  emits('msg',{text: 'hello', fn: (i)=>{
    result = i
  }})
  console.log('result:', result)
  buttonText.value = result
}
const emits = defineEmits(['msg'])
</script>

index.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
const sendMsg = ({text, fn}) => {
  console.log(text)
   fn('发送成功!')
}
</script>

<template>
  <header>
    <HelloWorld @msg="sendMsg" />
  </header>
</template>