全局事件总线，是组件间的一种通信方式，适用于任何组件间通信。

它的原理是给 Vue 的原型对象上面添加一个属性，这样的话所有组件的都可以访问到这个属性，然后通过这个属性可以访问到其他组件给这个属性绑定的一些方法，从而去传递数据。

使用

下面以同级组件间的传值为例

先在main.js中安装全局事件总线，此时Vue的原型对象便有了$bus属性

//引入Vue
import Vue from 'vue';
//引入App
import App from './App';

//关闭vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el: "#app",
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this//安装全局事件总线
    }
})

Employee组件

<template>
  <div class="employee">
      <h2>员工姓名：{{name}}</h2>
      <h2>员工年龄：{{age}}</h2>
  </div>
</template>

<script>
export default {
    name:"Employee",
    data(){
        return {
            name:"张三",
            age:25
        }
    },
    mounted(){
    //将自定义事件“demo”绑定到$bus属性上
        this.$bus.$on("demo",(data) => {
            console.log("Employee组件监听demo，接收数据：",data);
        })
    },
    beforeDestroy() {
        this.$bus.$off("demo");
    }
}

</script>

Company组件

<template>
  <div class="company">
      <h2>公司名称：{{name}}</h2>
      <h2>公司地址：{{address}}</h2>
      <button @click="sendMessage">点我发送</button>
  </div>
</template>

<script>
export default {
    name:"Company",
    data(){
        return {
            name:"五哈技术有限公司",
            address:"上海宝山"
        }
    },
    methods:{
    //点击事件内部通过$emit触发自定义的“demo”事件，并通过传参将值传过去
        sendMessage(){
            console.log("Company组件发送数据：",this.name);
            this.$bus.$emit("demo",this.name);
        }
    }

}    
</script>

在这个例子中，子组件Company和Employee之间通过全局数据总线进行数据传递。

$bus定义在Vue.prototype，因此$bus对所有组件可见，即所有组件可通过this.$bus访问。

$bus被赋值为this，即vm实例，因此$bus拥有vm实例上的所有属性和方法，如$emit、$on、$off等