Vue中獲取自定義事件返回值的方式

更新時間：2025年12月02日 10:08:26 作者：colorFocus

在 Vue 中,我們常通過 emit 自定義事件實現(xiàn)父子組件通信（子組件觸發(fā)事件、父組件監(jiān)聽）,也可借助 eventBus 事件總線完成任意組件間的通信,下文將說明 emit 自定義事件在同步、異步邏輯下的返回值獲取方式,需要的朋友可以參考下

引言

在 Vue 中，我們常通過 emit 自定義事件實現(xiàn)父子組件通信（子組件觸發(fā)事件、父組件監(jiān)聽），也可借助 eventBus 事件總線完成任意組件間的通信。

實際開發(fā)中，有時需要獲取自定義事件的執(zhí)行結(jié)果，以推進后續(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對象拿到執(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>