vue Bus总线

vue中我们经常遇到组件之间的通信，通常的通信方式有 父 → 子、子 → 父、兄弟组件 之间的通信。通常处理方式如下：

• 父 → 子：props传递数据 / vuex；

• 子 → 父：bus事件总线 / vuex;

• 兄弟组件：bus事件总线 / vuex;

在一些简单的项目中，我们没有必要使用Vuex，此时可以使用 公共事件总线（Event Bus） 来处理

1、创建事件总线

创建一个名为 bus.js 的JS文件

import Vue from 'vue';
export default new Vue();

或者直接在项目中的 main.js 初始化 Bus

//全局事件总线
Vue.prototype.$Bus = new Vue()

2、组件中使用

//  one.vue 中绑定监听方法
import Bus from 'bus.js';

methods: {
    busOn () {
        Bus.$on('test', params =>{
            ...
        })  
    }
}

//  two.vue 中触发方法
import Bus from 'bus.js';

methods: {
    busEmit () {
        Bus.$emit('test', params)  
    }
}

全局事件总线

//  one.vue 中绑定监听方法
methods: {
    busOn () {
        this.$Bus.$on('test', params =>{
            ...
        })  
    }
}

//  two.vue 中触发方法
methods: {
    busEmit () {
        this.$Bus.$emit('test', params)  
    }
}

注意 ：公共事件 Bus 使用不善，会是一种灾难。我们都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的Bus会被移除，这样就导致业务走不下去。如果业务有反复操作的页面，这样Bus事件有可能被多次绑定，造成方法会被多次调用，也是一个非常大的隐患。通常我们会在vue页面销毁 (beforeDestroy/destroyed)时，同时移除 Bus 事件监听。

关于Bus事件被多次绑定的问题，可以参考 [ https://www.jianshu.com/p/4bf32e518750 ]文章来处理问题。