vue中的时间总线（EventBus）

如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。

EventBus的简介

EventBus又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

如何使用？

一、初始化
1、直接在项目中的main.js中初始化EventBus

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

注意：这种方式初始化的EventBus是一个全局的事件总线
child2发送事件，child1接收事件

//child2
<template>
  <div>
    <h3>child2</h3>
    <button @click="sendToChild1">给child1发送消息</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendToChild1() {
        // 利用事件总线发送事件
        this.$bus.$emit('event-from-child2', 'some msg from child2')
       
      }
    },
  }
</script>

<style scoped>

</style>

//child1
<template>
  <div >
    <h3>child1</h3>
    <p>{{msg}}</p>
  </div>
</template>

<script>
  export default {
    props: {
      msg: {
        type: String,
        default: ''
      },
    },
    mounted () {
       this.$bus.$on('event-from-child2', msg => {
         console.log('Child1:', msg);
       });
     
    },
  }
</script>

<style scoped>

</style>

2、首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种，新创建一个 .js 文件，比如 event-bus.js

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

二、发送事件
假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想=通知 B页面。

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>
 
<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 
</script>

接下来，我们需要在 B页面 中接收这则消息。
三、接收事件

<!-- IncrementCount.vue -->
<template>
  <p>{{msg}}</p>
</template>
 
<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
};
</script>

同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法：

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
 
// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))