vue bus

Vue消息总线->bus

有些时候两个组价并不是父子组件的关系,也不在同一个下,这个时候他们两个组件之间的通信就可以用到bus

vue-bus 提供了一个全局事件中心，并将其注入每一个组件，你可以像使用内置事件流一样方便的使用全局事件。
安装

 npm install vue-bus

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装 vue-bus：

import Vue from 'vue';
import VueBus from 'vue-bus';

Vue.use(VueBus);

在实际应用中,我们一般会把bus抽离出来
bus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

在组件需要调用的时候再引入

import Bus from './Bus'

export default {
    data() {
        return {
            .........
            }
      },
  methods: {
        ....
        Bus.$emit('log', 120)
    },

  }

import Bus from './Bus'

export default {
    data() {
        return {
            .........
            }
      },
    mounted () {
       Bus.$on('log', content => { 
          console.log(content)
        });    
    }    
}

这样一个组件就能够触发另一个组件里面的方法,进而进行两个组件之间的通信了

详细

** 监听事件和清除监听 **

created() {
  this.$bus.on('add-todo', this.addTodo);
  this.$bus.once('once', () => console.log('这个监听器只会触发一次'));
},
beforeDestroy() {
  this.$bus.off('add-todo', this.addTodo);
},
methods: {
  addTodo(newTodo) {
    this.todos.push(newTodo);
  }
}

** 触发事件 **

// ...
methods: {
  addTodo() {
    this.$bus.emit('add-todo', { text: this.newTodoText });
    this.$bus.emit('once');
    this.newTodoText = '';
  }
}