VUE 创建全局事件 eventbus

Vue组件通讯

Vue组件数据通讯常常会有父子组件，兄弟组件，祖孙组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。

父子组件通讯存在的局限性

我们了解到，vue中为了提高组件的复用和重用性，通常会分割成独立的组件，这时候就会存在父组件与子组件。父组件通过props传递数据给子组件，子组件通过emit通知父组件做相应的动作。

但是这种父子组件之间的通讯props–emit的方式，在兄弟组件间的通讯就无能为力了（兄弟组件之间不可使用props–emit）。为了解决兄弟组件通讯的局限性，在Vue中有其他的方式来处理兄弟组件之间的数据通讯，比如Vuex这样的库。但在很多情况之下，咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通讯，而可以考虑Vue中的 事件总线 ，即 **EventBus **。

EventBus的简介

EventBus 又称为事件总线。在vue中EventBus作为沟通桥梁的概念，就像是所有组件共同相同的事件中心，可以向该中心发送注册事件或者接收事件，所有组件都可以上下平行地通知其他组件。

EventBus的使用

初始化

• 一种方式为 新创建一个js文件，在需要的地方引入

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

• 另一种方式为 可以直接在项目中的 main.js 初始化 EventBus ：

// main.js
Vue.prototype.$EventBus = new Vue()

发送事件

假设你有两个子组件： DecreaseCount 和 IncrementCount ，分别在按钮中绑定了 decrease()和 increment() 方法。这两个方法做的事情很简单，就是数值递减（增） 1 ，以及角度值递减（增） 180 。在这两个方法中，通过 EventBus.$emit(channel: string, callback(payload1,…)) 监听 decreased （和 incremented ）频道。

<----DecreaseCount----->
<template>
  <div class="decrease-count">
    <button @click="decrease()">点击-</button>
  </div>
</template>

<script>
import {
   EventBus