简单描述vue事件总线$bus及$on重复触发问题

使用情景

非父子组件之间通信时，一层一层传太麻烦，Vuex又有点小题大做，这时就会用到。

开始

在main.js中创建$bus，这样就能全局使用。

Vue.prototype.$bus = new Vue()

在组件中（下面就称作组件1）通过$emit分发事件

this.$bus.$emit('imgLoad')

在另一组件中，（下面就称作组件2）通过$on来监听该组件分发出来的事件。

this.$bus.$on('imgLoad',()=>{
	console.log('Home')
})

这样就简单的实现了非父子组件之间通信。

留意的坑

组件1分发的事件，组件2监听。我们通常把组件2监听写在钩子函数created或mounted中，当组件2被销毁时，比如切换组件，再次切换到组件2时，写在钩子函数中的$on又监听了一次，这就造成了重复监听。后果就是组件1分发了一次事件，而组件2因为绑了多个$on监听，就会重复执行函数体。
第一次切换到组件2，监听到绑定的’imgLoad’时只打印一次。

当切换组件，再切回组件2，总共打印了2次（因为控制台打印相同东西时就会只占一行，所以’Home’有一个是第一次切换打印的）

解决办法：
在组件下次触发$on之前，用$off取消下绑定
通常绑定在钩子函数beforeDestroy()或者destroyed()中，如果使用了keep-alive包裹，可以写在deactivated钩子函数中。

beforeDestroy() {
    this.$bus.$off('imgLoad')
  },