简单介绍：

使用props可以实现父组件向子组件传递数据，使用自定义事件可以实现子组件向父组件传递数据，那么，如何实现兄弟组件之间传递数据就应用到了全局事件总线这个概念。在子组件向父组件传递数据的时候，使用的是在父组件中在子组件的标签上绑定一个自定义事件，并在子组件中触发这个自定义组件，从而完成通信的过程。但是兄弟组件之前不存在互相引用组件的形式，那么这个事件要绑定在谁身上就是第一个问题。

这个人，首先要能被所有的VueComponents组件所引用到，并且能完成绑定事件和触发事件的功能。所以，能满足这两个条件的对象就是Vue实例对象。因为你所有的组件对象都是Vue调用component创建出来的，所以肯定是可以被发现的，而组件对象是肯定可以调用触发和绑定事件的，所以现在知道给谁绑定了之后，接下来就是如何获取这个对象。

要获取Vue的实例对象，就要去main.js中去，因为这里是唯一定义Vue实例对象的地方，所以在main.js中，添加如下代码：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //安装全局事件总线，就是在创建之前，给Vue实例添加一个对象，并将Vue实例赋值给这个对象，使这个对象可以作为Vue实例使用
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

在beforCreate这个生命周期钩子函数中，给Vue实例对象添加一个对象，赋值为一个Vue实例对象，这个过程叫做安装全局事件总线。

全局事件总线的基本理念，是将所有的发送数据和接收数据的事件都绑定在一个人身上，每次触发事件的时候，都要经过这个人，所以解决了必须在子组件的标签中绑定事件的弊端，实现了即使不是父子关系的组件之间通信的问题

发送数据的子组件：

<template>
<div>
<!--  这个子组件是用来发送数据的-->
<!--  将点击事件绑定到方法，方法中出发一个自定义事件，这个自定义事件是绑定在事件总线上的-->
  <button type="button" @click="sendData">传递数据</button>
</div>
</template>

<script>
export default {
  name: "s_com1",
  data(){
    return {
      name:'s_com1'
    }
  },
  methods:{
    sendData(){
      //这个事件名为send的事件是绑定在事件总线上的，在这个子组件上触发之后，实现了提供数据的功能
      this.$bus.$emit('send',this.name)
    }
  }
}
</script>

<style scoped>

</style>

接收数据的子组件：

<template>
<div>
<!--  这个子组件是用来接受数据的-->
{{count}}
</div>
</template>

<script>
export default {
  name: "s_com1",
  data(){
    return {
      count:''
    }
  },
  mounted() {
    //在这个子组件中，同样使用事件总线绑定了一个事件，事件名就是发送数据的自定义事件名
    //这个绑定事件的语句要写在mounted(钩子函数)内，表示在执行方法之前，首先执行钩子函数中的内容
    //在这个钩子函数中绑定了这个自定义事件，就可以接收到来自这个定义事件所发送的数据
    //数据的接受使用的是一个方法接受
    this.$bus.$on('send',this.rec_data)
  },
  methods:{
    //接收数据的方法，方法中的形参就是接收到的来自其他组件的数据
    //在方法内部可以对数据进行逻辑操作，这里只是简单的将数据存储到组件中的数据中进行展示而已
    rec_data(data){
      this.count = data
    }
  }
}
</script>

<style scoped>

</style>

简单案例：在了解什么是全局事件总线和全局事件总线的基本使用发方法之后，做一个简单的案例

实现效果：

根据效果图可以看到在我们点击组件A内的按钮时，组件B中的数据同样发生了改变，这就是全局数据总线一个最简单的应用场景

组件A的：

<template>
  <div>
    <p>组件A</p>
    <p>点击自增后将组件中的数据传递给组件B：<button type="button" @click="sendData">{{count}}</button></p>

  </div>
</template>

<script>
export default {
  name: "s_bus_1",
  data(){
    return {
      count:0
    }
  },
  methods:{
    sendData(){
      this.count++
      this.$bus.$emit('send',this.count)
    }
  }
}
</script>

<style scoped>

</style>

组件B：

<template>
  <div>
    <p>组件A</p>
    <p>点击自增后将组件中的数据传递给组件B：<button type="button" @click="sendData">{{count}}</button></p>

  </div>
</template>

<script>
export default {
  name: "s_bus_1",
  data(){
    return {
      count:0
    }
  },
  methods:{
    sendData(){
      this.count++
      this.$bus.$emit('send',this.count)
    }
  }
}
</script>

<style scoped>

</style>

App组件：

<template>
  <div id="app">
    <h1>组件A向总线上报事件</h1>
    <s_bus_1></s_bus_1>
    <h1>组件B通过总线监听相关事件</h1>
    <s_bus_2></s_bus_2>
  </div>
</template>

<script>
import s_bus_2 from "@/components/s_bus_2";
export default {
  name: 'App',
  components: {
    s_bus_1,
    s_bus_2
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>