Vue 中央事件总线的坑

两个问题:

  • 问题1: 为什么第一次触发的时候页面B中的on事件没有被触发
  • 问题2: 为什么后面再一次依次去触发的时候会出现,每一次都会发现好像之前的on事件分发都没有被撤销一样,导致每一次的事件触发执行越来越多。

问题一

        第一次触发的时候页面B中的on事件没有被触发

产生原因

当我们还在页面A的时候,页面B还没生成,也就是页面B中的 created中所监听的来自于A中的事件还没有被触发。这个时候当你A中emit事件的时候,B其实是没有监听到的。

解决办法

我们可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候,B页面组件已经被created了,也就是我们写的on事件已经触发了,所以可以在beforeDestory的时候, on事件已经触发了,所以可以在beforeDestory的时候,on事件已经触发了,所以可以在beforeDestory的时候,emit事件

问题二

        后面再一次依次去触发的时候会出现,每一次都会发现好像之前的on事件分发都没有被撤销一样,导致每一次的事件触发执行越来越多。

产生原因

就是说,这个$on事件是不会自动清楚销毁的,需要我们手动来销毁。(不过我不太清楚这里的external bus 是什么意思,有大神能解答一下的吗,尤大大也提到如果是注册的是external bus 的时候需要清除)

解决办法

在B组件页面中添加Bus.$off来关闭

// 在B组件页面中添加以下语句,在组件beforeDestory的时候销毁。
beforeDestroy () {
    bus.$off('get', this.myhandle)
},

总结

所以,如果想要用 bus 来进行页面组件之间的数据传递,需要注意两点:

一、组件A emit 事件应在beforeDestory生命周期内。

二、组件B内的 on 记得要销毁

 

 

https://blog.csdn.net/lily__an/article/details/89327172

posted @ 2019-09-04 11:00  格鲁特baby  阅读(1131)  评论(0编辑  收藏  举报