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

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐