如何利用 Emit 结合 Promise 实现事件回调？让父子通信异步化-Vue.js-PHP中文网

Vue 3 中 emit 本身不支持异步等待，但可通过父子组件约定机制实现：父组件传入 Promise 的 resolve/reject，子组件在处理完成后调用；或更优方式是子组件用 defineExpose 暴露返回 Promise 的方法，父组件通过 ref 调用并 await。

如何利用 emit 结合 promise 实现事件回调？让父子通信异步化

在 Vue 3 的 Composition API 中，emit 本身是同步触发的，它不返回 Promise，也不能直接“等待”子组件处理完成。但你可以通过手动包装 + 约定机制，让父子通信具备异步等待能力——本质是让子组件主动 resolve 一个外部传入的 Promise。

核心思路：子组件暴露 resolve 能力，父组件控制 Promise 生命周期

不是让 emit 变成 Promise，而是让子组件在接收事件后，执行某个可被父组件调用的 resolve 函数，从而“完成”父组件发起的 Promise。

父组件创建一个 Promise，并把它的 resolve（和可选 reject）作为参数，通过 emit 发送给子组件
子组件监听该事件，拿到 resolve 函数，在合适时机（如操作完成、校验通过、动画结束等）调用它
父组件 await 这个 Promise，即可实现“等待子组件处理完毕”

具体实现示例（Vue 3 + setup script）

父组件（Parent.vue）：

const handleAsyncAction = async () => {
  return new Promise((resolve, reject) => {
    // 触发自定义事件，并把 resolve/reject 传给子组件
    emit('request-confirm', { resolve, reject });
  });
};

// 使用时可 await
const onClick = async () => {
  try {
    const result = await handleAsyncAction();
    console.log('子组件确认完成，返回：', result);
  } catch (err) {
    console.warn('被子组件拒绝或出错：', err);
  }
};

子组件（Child.vue）：

const props = defineProps(['onRequestConfirm']);
const emit = defineEmits(['confirm-result']);

// 监听父组件发来的 request-confirm 事件
watch(() => props.onRequestConfirm, (payload) => {
  if (!payload || typeof payload.resolve !== 'function') return;

  // 模拟异步操作（如弹窗、API 请求、用户确认）
  setTimeout(() => {
    const userConfirmed = window.confirm('确定要执行吗？');
    if (userConfirmed) {
      payload.resolve({ success: true, data: 'done' });
    } else {
      payload.reject(new Error('用户取消'));
    }
  }, 300);
});

⚠️ 注意：这里使用 props.onRequestConfirm 是为了兼容 Vue 3 的响应式传递（也可用 defineExpose + ref 引用子组件实例，见下一条）。

更推荐方式：用 defineExpose + ref 获取子组件方法

避免通过 props 传递函数（可能触发不必要的响应式开销），改用显式暴露方法：

子组件用 defineExpose 暴露一个 confirm 方法，该方法返回 Promise
父组件用 ref 拿到子组件实例，直接调用该方法

子组件（Child.vue）：

const confirm = () => {
  return new Promise((resolve, reject) => {
    // 同上：弹窗、请求、校验……完成后调用 resolve/reject
    setTimeout(() => {
      const ok = window.confirm('继续？');
      ok ? resolve({ ok }) : reject(new Error('canceled'));
    }, 200);
  });
};

defineExpose({ confirm });

父组件（Parent.vue）：

const childRef = ref();

const handleClick = async () => {
  try {
    const res = await childRef.value.confirm();
    console.log('收到子组件结果：', res);
  } catch (e) {
    console.error('子组件流程中断：', e);
  }
};