在Vue中使用EventBus

（一）背景介绍
针对大中型项目：

使用vuex，组件间的通信和数据状态管理的处理会更加明确，所以当确定项目体量足够庞大以后，最好在开始就把vuex考虑进去。

针对小型项目或独立于项目整体数据结构规划的组件通信：

在Vue中我们可以使用EventBus的方式来方便的在兄弟组件之间通信。

(二)使用方法
1.创建EventBus，新建一个eventBus.js文件，内容是以下代码：

import Vuefrom 'vue';

export const EventBus = new Vue();

2.处理数据发送，我这里把测试用单文件组件和eventBus.js文件放在一个目录下了

<template>
  <button  @click="testClick()"></button>
</template>

<script>
  import {EventBus} from "./eventBus";
  export default {
    data: function () {
      return {
        toggle: false
      }
    },
    methods : {
      testClick: function () {
        this.toggle = !this.toggle;
        EventBus.$emit('test-click', this.toggle);
      }
    }
  }
</script>

3.处理数据接收，我们可以在发送组件的兄弟组件或者父组件挂载方法中监听'test-click'事件

<template>
  <p>{{testToggle}}</p>
</template>
import {EventBus} from "./eventBus";
export default {
  data: function () {
    return {
      testToggle: false
    }
  },
  mounted() {
    EventBus.$on('test-click', toggle => {
      this.testToggle = toggle;
    });
  }
}

或者只监听一次此事件

  EventBus.$once('test-click', toggle => {
    console.log(toggle);
  });

4.移除事件，在我们业务场景不需要再进行监听的时候，可以使用将监听事件移除

const testToggle = function(toggle) {
  console.log(toggle);
}
//移除指定事件的指定监听器
EventBus.$off('test-click', testToggle);
//移除指定事件上的所有监听器
EventBus.$off('test-click');
//移除所有的事件监听
EventBus.$off();

根据自己的业务场景去做修改就可以了