Vue eventbus 使用中的重复触发解决方案及存在的Bug

前言

        你们还在吗有一周时间不见了吧，那么这周讲一些什么呢，不知道大家是否还记得我上周说过的这周要讲eventbus，其实eventbus仍是有bug的，那么废话很少说直接开始正题

eventbus重复触发的bug

        记得上周我讲过的demo吗，如今整理一下

//main.js
window.Bus =new Vue();
//a.vue
...
 beforeCreate(){
    Bus.$on("this_change",[1,2])
 }
....
//b.vue
...
created(){
    Bus.$on("this_change",(em) => {
        //这样就能够打印出来刚刚传过来的1和2了
        console.log(em[1],em[2]); 
    });
}，
beforeDestroy(){
    //最后不要忘了删除传输事件
    Bus.$off("this_change")
}
复制代码

        很简单对吧，那么你就大错特错了由于咱们的理想状态是使用完一次组件以后就当即删除该组件以保证传输事件的删除，可是实际状况呢，有很大不一样这点你们应该都想到了对吧，因此咱们接下来要讲的是实际场景中的应用。

        顺便说一嘴上面代码块的代码有不少都是省略的，这个你们要拿去作demo的时候要注意，代码补全。

        那么咱们下面要讲的场景是我这边真实发生的一个场景，由于我作的是关于区块链金融部分的内容因此在实际需求中我作的页面并不须要刷新和缓存数据可是有一点就是，在不刷新页面或组件的状况下要经过子组件之间互相传递数据，这点你们应该能瞬间想到不少吧，好比两个子组件不公用ajax数据，每一个组件单独请求，又或者是吧数据存在本地而后调用，又或者是把数据传入最上层父组件以后再经过父组件分发的形式传入对应的子组件完成交互。可是你们不知道有没想过这样几个方法不只费力不讨好并且子组件之间传值一旦多了demo还好可是到项目这块是否是就很差控制了，相对于比较小的项目来讲eventbus的使用仍是比较省事省力的，用较少的代码完成交互。

        说了这么多解决方案是什么，那固然就是eventbus来解决喽，可是你们注意刚才我说的在组件和页面不刷新的前提下了吗，这个时候咱们就应该能想到，beforeDestroy()的Bus.$off是否是就不会销毁一直存在呢，答案是确定的，可是更绝望的是你若是在这个组件上多注册几个传输事件和接收事件的话那么这些传输事件和接收事件来回切换的话那么你试着打印就会发现这些事件在点击多了之后会以递增的方式进行触发，这就是eventbus在实际使用和作demo的区别。

        回归正题这种bug怎么解决呢

        第一种是在使用过Bus.$on以后当即使用Bus.$off方法，可是作过以后发现了一个说不大也不大说不小也的bug就是在Bus.$0ff以后这个触发事件只会触发一次，那么上网上查了一下一篇尤大神的回答，非常不错，就贴在下面了网址

github.com/vuejs/vue/i…

        这个回答里面有说mixin这个方法是能够解决的至于怎么去解决这个问题我会在下周的文章里讲到也是下周文章的一个主题吧，至于这里的解决方案有一种比较快速的解决方案介绍给你们vue-happy-bus这个插件专门是为Busevent而生的，这个以后再讲，先讲一下Bus.$off要放在那里

//b.vue
//我把上面的东西拿过来是为了你们能看得清楚
created(){
    Bus.$on("this_change",(em) => {
        //这样就能够打印出来刚刚传过来的1和2了
        console.log(em[1],em[2]); 
        //这里就是我说的在使用以后当即删除这个事件以防屡次触发
        Bus.$off("this_change",em);
    });
}
复制代码

        可是上面的这个方法仍是有一些小问题，好比有事触发不了，或者有时会报错，这几个都不是最佳解决方案，可是上面说的vue-happy-bus这个插件就完美解决了此问题，这个咱们留在下下周的文章中我会花一篇文章的时间讲解这个组件的实现思想。

vue-happy-bus

        你们也看到了上面我这么推崇vue-happy-bus这个组件大家是否是在想有何不一样，这个组件，他究竟解决了咱们的问题没，这个我能够很负责任的告诉你们这个确实解决了咱们如今的所需，废话很少说先看代码

//npm或cnpm下载
npm install vue-happy-bus --save
cnpm install vue-happy-bus --save
//main.js中引用
//bus状态管理
import BusFactory from 'vue-happy-bus'
//使用全局变量引用
Vue.prototype.$BusFactory=BusFactory;
//a.vue中引用这里注意一点每一个使用Bus的组件中都要在data中注册这个事件Bus:this.$BusFactory(this)这样才能调用其中这个this指向vue原型
....
data:function(){
    Bus:this.$BusFactory(this)
},
methods:{
    //在点击事件上执行这个方法就能传递参数
    click_me:function(){
        this.Bus.$emit("clear_me","clear_me")
    }
}
....
//b.vue
....
created(){
     this.Bus.$on("clear_me",(em) => {
        console.log(em)
     }
}
....
复制代码

        是不不是在奇怪为何我没用Bus.$off方法由于在咱们调用Bus.$on的时候vue-happy-bus就已经帮咱们建立过off事件并自动挂载在事件结束的时候调用，这样咱们使用一次那么它就会直接把Bus.$off自动调用一次，就至关因而删除了整个事件，就是这样，具体的还要看我下下周的文章。

        好了此次把上次的坑给埋了又留下两个坑等着我去踩，那么你们此次的分享就到这，谢谢观看，想要提问的能够在下面评论区讨论。