vue中的全局事件总线

(作者笔记自用)

1.首先是安装全局事件总线：

在new Vue()时在beforeCreate()钩子中使用Vue.prototype.$bus = this，这里涉及到了JavaScript中原型链的相关知识，这里就不展开解释。

new Vue({
    ......
	beforeCreate() {
            Vue.prototype.$bus = this;
	},
    ......
}) 

2.使用全局事件总线：

使用时在需要接收数据的组件中使用this.$bus.$on('xxx', 绑定的回调触发函数)，在发送数据的组件中使用this.$emit('xxx', 发送的数据)来触发全局事件总线。

methods(){
    // 回调触发函数
    demo(data){......},
}
......
mounted() {
    // 绑定事件
    this.$bus.$on('demo', this.demo);
}

methods(){
  check(data){
      // 触发绑定的事件
      this.$bus.$emit('demo', data); 
  },
}

3。解绑组件所用到的全局事件总线上的事件：

最后最好在接受数据的组件的beforeDestroy()钩子中，用$off去解绑当前组件所用到全局事件总线的事件。

// 解除对应名称的绑定事件
this.$bus.$off('demo');
// 无参数，解除所有绑定的事件
this.$bus.$off();