事件总线eventBus

1、为什么使用事件总线

在vue中用到的最多的组件之间传值就是父子组件传值和兄弟之间传值，但是这两种有缺陷，当两个组件并非父子和兄弟时，只用这两种方式太麻烦，于是可以用vuex统一管理状态，除了vuex还可以用事件总线（EventBus）的方式传值，不管哪个组件都能获取得到。

2、如何使用

（1）创建eventBus.js文件

import Vue from 'vue'
export default new Vue;

（2）在main.js文件中全局引入，然后挂载到vue原型上

import bus from './utils/eventBus'
Vue.prototype.bus = bus;

（3）发送事件

用this.bus.$emit(‘事件名’,参数) 进行传参

比如点击a组件的按钮给b组件传参

// a组件
 <button @click="toB()">点击给b组件传值</button>



// js

  methods: {
    toB() {
      this.bus.$emit("name", 'a组件的值');
    }

（4）接收参数

在mounted中 通过this.bus.$on(‘事件名’,()=>{}) 接收参数

mounted() {
    this.bus.$on("name", (aName) => {
      // aName就是a组件传来的值 此时b组件就可以对传过来的值进行操作了
      console.log(aName)
      this.bName = aName
    });
  }

（5）销毁事件总线

在beforeDestroy中销毁 $off

beforeDestroy() {
    //组件销毁前要解绑事件
    this.bus.$off("name");
  },