Vue中獲取自定義事件返回值的方式
引言
在 Vue 中，我們常通過 emit 自定義事件實(shí)現(xiàn)父子組件通信（子組件觸發(fā)事件、父組件監(jiān)聽），也可借助 eventBus 事件總線完成任意組件間的通信。
實(shí)際開發(fā)中，有時(shí)需要獲取自定義事件的執(zhí)行結(jié)果，以推進(jìn)后續(xù)邏輯處理。但 emit 本身無返回值，且事件監(jiān)聽函數(shù)可能包含異步邏輯，該如何將執(zhí)行結(jié)果回傳給觸發(fā)事件的組件呢？
下文將說明 emit 自定義事件在同步、異步邏輯下的返回值獲取方式，eventBus 事件總線的處理方式可參考此邏輯。
一、同步邏輯
子組件觸發(fā)事件，父組件以同步邏輯處理。
結(jié)論：通過回調(diào)函數(shù)獲取到執(zhí)行結(jié)果。
父組件：
<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);
// 繼續(xù)子組件中的邏輯
// ......
});
}
</script>
二、異步邏輯
子組件觸發(fā)事件，父組件以異步邏輯處理。
結(jié)論：通過Promise對(duì)象拿到執(zhí)行結(jié)果。
父組件：
<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>
總結(jié)
無論是同步還是異步邏輯，本質(zhì)都是通過回調(diào)函數(shù)的方式，將父組件（或其他組件）的執(zhí)行結(jié)果回傳，而 resolve 本質(zhì)也是一種回調(diào)函數(shù)。
到此這篇關(guān)于Vue中獲取自定義事件返回值的方式的文章就介紹到這了,更多相關(guān)Vue獲取自定義事件返回值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項(xiàng)目
這篇文章主要介紹了解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項(xiàng)目.文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue3計(jì)算屬性computed和監(jiān)聽屬性watch區(qū)別解析
計(jì)算屬性適用于對(duì)已有的數(shù)據(jù)進(jìn)行計(jì)算,派生新的數(shù)據(jù),并在模板中使用；而監(jiān)聽屬性適用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些特定的操作,根據(jù)具體的需求和場(chǎng)景,選擇適合的機(jī)制這篇文章主要介紹了Vue3計(jì)算屬性computed和監(jiān)聽屬性watch,需要的朋友可以參考下2024-02-02
Vue2.0實(shí)現(xiàn)自適應(yīng)分辨率
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)自適應(yīng)分辨率，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vue.js 加入高德地圖的實(shí)現(xiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的方法詳解
這篇文章主要給大家介紹了關(guān)于VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
<keep-alive> 是一個(gè)抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會(huì)重新渲染,這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時(shí),其狀態(tài)將被保留,而不是被銷毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue slot插槽的使用，在生活中很多地方都有插槽，電腦usb的插槽，插板當(dāng)中的電源插槽，插槽的目的是為了讓我們?cè)瓉淼脑O(shè)備具備更多的擴(kuò)展性比如電腦的USB我們可以插入U(xiǎn)盤，手機(jī)，鼠標(biāo)，鍵盤等等，下面文章就來介紹Vue slot插槽是如何使用的2021-10-10
本篇文章主要介紹了詳解Vue.js分發(fā)之作用域槽，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue如何下載本地靜態(tài)資源static文件夾，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
前端Vue設(shè)置cookie、刪除cookie,獲取cookie方式
這篇文章主要介紹了前端Vue設(shè)置cookie、刪除cookie，獲取cookie方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10