vue eventbus

这个集中式的事件中间件就是 Bus。我习惯将bus定义到全局：

app.js

var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);

然后在组件中，可以使用$emit， $on， $off 分别来分发、监听、取消监听事件：

分发事件的组件

// ...
methods: {
  todo: function () {
    this.$bus.$emit('todoSth', params); //params是传递的参数 //... } }

监听的组件

// ...
created() {
  this.$bus.$on('todoSth', (params) => {  //获取传递的参数并进行操作
      //todo something }) }, // 最好在组件销毁前 // 清除事件监听 beforeDestroy () { this.$bus.$off('todoSth'); },

如果需要监听多个组件，只需要更改 bus 的 eventName:

// ...
created() {
  this.$bus.$on('firstTodo', this.firstTodo);
  this.$bus.$on('secondTodo', this.secondTodo); }, // 清除事件监听 beforeDestroy () { this.$bus.$off('firstTodo', this.firstTodo); this.$bus.$off('secondTodo', this.secondTodo); },