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

直须

已于 2023-08-19 12:48:38 修改

阅读量4.7k

点赞数 8

文章标签： vue.js javascript 前端

于 2023-08-19 12:47:21 首次发布

本文链接：https://blog.csdn.net/qq_40577885/article/details/132378570

版权

文章讲述了在Vue3中，由于emit不直接支持返回值，通过定义一个回调函数来在子组件（HelloWorld.vue）处理emit事件并传递返回值。index.vue中的sendMsg函数接收一个对象，其中包含text和fn属性，fn用于接收并处理返回值。

摘要由CSDN通过智能技术生成

在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>