问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发
![](http://upload-images.jianshu.io/upload_images/13100152-35230bb4446991da.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/421/format/webp)
触发bus.$on中绑定的方法.png
![](http://upload-images.jianshu.io/upload_images/13100152-851d77e0321f87b7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/836/format/webp)
bus.$on多次绑定.png
解决办法:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on )
bus.$off("backUpLevel");
bus.$on('backUpLevel', () => {
if(self.ONION.length <= 1){ self.jumpSubDir() }else{ let len = self.ONION.length-1 self.jumpTeamId(self.ONION[len].id,self.ONION[len].name,self.ONION[len].type) } })
![](http://upload-images.jianshu.io/upload_images/13100152-c3e989781888b6d4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/838/format/webp)
每次绑定前解绑bus.$on方法.png
解决:
看一下github上提出的。issue
https://github.com/vuejs/vue/issues/3399
![](http://upload-images.jianshu.io/upload_images/7902761-cb7cbf2ea8c0c7b2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
image.png
尤大大提出了以下解决:
![](http://upload-images.jianshu.io/upload_images/7902761-ef17689a080f17ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
image.png
*就是说,这个$on事件是不会自动清楚销毁的,需要我们手动来销毁。(不过我不太清楚这里的external bus 是什么意思,有大神能解答一下的吗,尤大大也提到如果是注册的是external bus 的时候需要清除)****
所以。我在B组件页面中添加Bus.$off来关闭。代码如下:
// 在B组件页面中添加以下语句,在组件beforeDestory的时候销毁。
beforeDestroy () {
bus.$off('get', this.myhandle)
},