Vue中$emit回调完成后获取返回值的实现求助

嘿，我明白你遇到的问题了——你想在子组件调用$emit触发父组件的回调后，拿到这个回调的返回值，但直接判断$emit的返回值是行不通的，这是因为**$emit本身的返回值并不是父组件回调的结果，而是一个布尔值，用来表示当前是否有对应的事件监听器存在**。

下面给你两种常用的解决方案，根据你的场景选择就行：

方案一：将回调函数作为Props传递给子组件 #

这种方式适合同步场景，直接把父组件的回调函数通过props传给子组件，子组件可以直接调用并获取返回值：

子组件代码 #

export default {
  props: {
    cb: {
      type: Function,
      required: true
    }
  },
  methods: {
    test: function () {
      // 直接调用props中的回调函数，拿到返回值
      const callbackResult = this.cb(param1);
      if (callbackResult) {
        console.log('return true')
      } else {
        console.log('return false')
      }
    }
  }
}

父组件代码 #

<template>
  <!-- 通过props把回调函数传给子组件 -->
  <YourVueComponent :cb="cb" />
</template>

<script>
export default {
  methods: {
    cb: function (param) {
      // 这里可以处理子组件传过来的param1
      console.log('收到子组件参数：', param)
      return true;
    }
  }
}
</script>

方案二：在$emit时传递回调参数（支持异步场景） #

如果父组件的回调是异步操作（比如请求接口），或者你更想保留事件触发的模式，可以在$emit时额外传递一个回调函数，让父组件处理完逻辑后调用这个回调把结果传回子组件：

子组件代码 #

export default {
  methods: {
    test: function () {
      this.$emit('cb', param1, (result) => {
        // 这里拿到父组件传回来的结果
        if (result) {
          console.log('return true')
        } else {
          console.log('return false')
        }
      });
    }
  }
}

父组件代码 #

export default {
  methods: {
    cb: function (param, callback) {
      // 模拟异步操作，比如接口请求
      setTimeout(() => {
        const res = true; // 这里是你的业务逻辑返回结果
        callback(res); // 调用子组件传递的回调，把结果传回去
      }, 1000);
    }
  }
}

总结 #

Vue的$emit本质是事件通知机制，并不是为了获取返回值而设计的，所以要实现这个需求，我们需要通过回调传递的方式来完成上述交互。根据你的业务场景（同步/异步）选择对应的方案就好啦～

内容的提问来源于stack exchange，提问作者pdwjun