vue 中央事件总线传递数据执行顺序导致第一次数据传输错误

Question

通过 vue 官网提供的中央事件总线在兄弟组件之间传递参数

---

在生成订单按钮点击之后将生成的当前订单数据传递给订单列表

createORder () {
  let orderObj = {...} //订单数据
  this.$router.push('/home/OrderList') //订单列表路由
  Bus.$emit('createOrderItem', orderObj) // 通过 bus 传递订单数据
  console.log(`生成订单成功`, orderObj) //成功打印
}

mounted () {
  // 获取生成的订单

  // 在第一次点击生成订单之后跳转到 list 触发不了$on 事件
  Bus.$on('createOrderItem', (orderItemObj) => {
   console.log(orderItemObj, `接收生成的订单成功`)
   this.orderListData.push(orderItemObj)
  })
}

---

在上面的代码中我理解的是 bus 先去触发$ emit,list 才能$on 接收,但是在执行过程中却是先执行了$on 事件,再回头去触发的$ emit, 这样第一次先触发$on 的话orderItemObj是没有的,请求大家帮助我解决这个问题,感谢!

Answer 1

没太看明白题主的问题。

$on只是做了监听，需要等bus触发了 $emit 之后，回调才会执行。

所以，你说的 这样第一次先触发$on 的话orderItemObj是没有的 情况应该不会有。

如果有问题，可以做个小demo链接出来看看。