Vue中获取自定义事件返回值的方式
更新时间：2025年12月02日 10:08:26 作者：colorFocus
在 Vue 中,我们常通过 emit 自定义事件实现父子组件通信（子组件触发事件、父组件监听）,也可借助 eventBus 事件总线完成任意组件间的通信,下文将说明 emit 自定义事件在同步、异步逻辑下的返回值获取方式,需要的朋友可以参考下
引言
在 Vue 中，我们常通过 emit 自定义事件实现父子组件通信（子组件触发事件、父组件监听），也可借助 eventBus 事件总线完成任意组件间的通信。
实际开发中，有时需要获取自定义事件的执行结果，以推进后续逻辑处理。但 emit 本身无返回值，且事件监听函数可能包含异步逻辑，该如何将执行结果回传给触发事件的组件呢？
下文将说明 emit 自定义事件在同步、异步逻辑下的返回值获取方式，eventBus 事件总线的处理方式可参考此逻辑。
一、同步逻辑
子组件触发事件，父组件以同步逻辑处理。
结论：通过回调函数获取到执行结果。
父组件：
<template>
<ChildComponent @childEvent="handleChildEvent" />
</template>
<script setup>
import ChildComponent from "./ChildComponent.vue";
function handleChildEvent(callback) {
const result = "Data from Parent";
callback(result);
}
</script>
子组件：
<template>
<el-button type="primary" @click="triggerEvent"
>Trigger Child Event</el-button
>
</template>
<script setup>
const emit = defineEmits(["childEvent"]);
function triggerEvent() {
emit("childEvent", (result) => {
console.log("parent result: ", result);
// 继续子组件中的逻辑
// ......
});
}
</script>
二、异步逻辑
子组件触发事件，父组件以异步逻辑处理。
结论：通过Promise对象拿到执行结果。
父组件：
<template>
<ChildComponent @childEvent="handleChildEvent" />
</template>
<script setup>
import ChildComponent from "./ChildComponent.vue";
function otherLogic() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data from Parent");
}, 2000);
});
}
async function handleChildEvent({ resolve, reject }) {
const result = await otherLogic();
resolve(result);
}
</script>
子组件：
<template>
<el-button type="primary" @click="triggerEvent"
>Trigger Child Event</el-button
>
</template>
<script setup>
const emit = defineEmits(["childEvent"]);
async function triggerEvent() {
try {
const result = await new Promise((resolve, reject) => {
emit("childEvent", { resolve, reject });
});
console.log("parent result: ", result);
} catch (e) {
console.log(e);
}
}
</script>
总结
无论是同步还是异步逻辑，本质都是通过回调函数的方式，将父组件（或其他组件）的执行结果回传，而 resolve 本质也是一种回调函数。
到此这篇关于Vue中获取自定义事件返回值的方式的文章就介绍到这了,更多相关Vue获取自定义事件返回值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式，如果是大型项目，很多时候都需要在子组件之间传递数据，使用vue的状态管理工具vuex很好的解决2018-08-08
vue3使用高德地图,自定义点标记、默认点聚合样式、点击点标记获取信息
这篇文章主要介绍了vue3使用高德地图,自定义点标记、默认点聚合样式、点击点标记获取信息的相关知识,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-01-01
Vue中@change、@input和@blur、@focus的区别及@keyup用法
这篇文章主要介绍了Vue中@change、@input和@blur、@focus的区别及@keyup用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
vue打包静态资源后显示空白及static文件路径报错的解决
这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这两天在做vue项目存储个人信息的时候,遇到了页面刷新后个人信息数据丢失的问题,在查阅资料后,我得出两种解决数据丢失,使用数据持久化的方法,感兴趣的小伙伴跟着小编一起来看看吧2023-08-08
本文介绍了Vue3中实现父子组件双向绑定的四种方式并对比了各自适用场景与优缺点,每种方式结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-07-07
这篇文章主要为大家详细介绍了Vue.js实现文章评论和回复评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了原理深度解析Vue的响应式更新比React快，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
uni-app中使用ECharts配置四种不同的图表(示例详解)
在uni-app中集成ECharts可以为我们的应用提供强大的图表功能,我们详细说一下如何在uni-app中使用ECharts,并配置四种不同的图表,感兴趣的朋友跟随小编一起看看吧2024-01-01
Vue中使用v-model双向数据绑定select、checked等多种表单元素的方法
v-model 指令可以用在表单 input、textarea 及 select 元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素,本文给大家介绍Vue中如何使用v-model双向数据绑定select、checked等多种表单元素,感兴趣的朋友一起看看吧2023-10-10
最新评论