是什么？

是一种组件间通信的方式，适用于任意组件间通信

---

 

 怎么安装全局总线？

一开始在main.js里面，但后来使用beforeCreate(){}钩子，在这个钩子中，是在数据监测，数据代理之前创建，此时无法通过Vue实例访问到data中的数据，methods中的方法，模板还没解析。

Vue.prototype.$bus = this，将Vue的原型对象的属性$bus指向当前的Vue实例对象，因为Vue的原型对象的属性的方法都可以被Vue实例对象和VueComponent组件实例对象访问得到，这里就涉及到Vue得原型对象与VueComponent得原型对象的原型关系，我之前画了一个图，可以方便理解一种重要的内置关系。 

 const D = Vue.extend({})
 const d = new D
 Vue.prototype.x=d

new Vue({
    el:'#app',
    render: h => h(App)
})

new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})

这样子Vue实例对象和VueComponent实例对象都可以访问到Vue原型对象上的$on,$off,$emit方法了！

---

怎么使用全局事件总线？

1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身，比如进行兄弟组件间通信，在School组件中想要得到Student组件的学生名字，在组件挂载后进行绑定hello事件，使用箭头函数准备接受传过来的参数。

 mounted(){
        this.$bus.$on('hello',(data)=>{
            console.log('school组件接收到了',data)
        })
    },

或者【注意this指向问题】 

methods(){
           demo(data){...}
        }   
        ...
        mounted(){
          this.$bus.$on('hello',this.demo)
        }

2.提供数据：B组件去触发事件。比如在Student组件中准备一个按钮，绑定send方法，点击按钮去触发这个事件。

 methods:{
        send(){
            this.$bus.$emit('hello',this.name)
        }
    }

值得注意的一点是：最好在beforeDestory(){}钩子中，用$off去解绑当前组件所用到的事件，所以在School组件中去解绑hello事件

beforeDestroy() {
        console.log('hello事件被解绑')
       this.$bus.off('hello')
    },

---

 

完整代码如下：

main.js

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

//关闭vue生产模式
Vue.config.productionTip = false

//全局事件总线:任意组件通信
// Vue.prototype.x={
//     a:1,
//     b:2
// }
// const D = Vue.extend({})
// const d = new D
// Vue.prototype.x=d
// console.log('Vue.prototype.x',Vue.prototype.x);
// console.log('Vue.prototype',Vue.prototype);
// console.log('Vue.prototype.__proto__==',Vue.prototype.__proto__==Object.prototype);
// console.log('Vue',Vue);

new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})

School.vue

<template>
  <div  class='demo title'>
      <h1>学校名称：{{name}}</h1>
      <h1>学校地址：{{address}}</h1>
  </div>
</template>

<script>

export default {
    name:'School',
    data() {
        return {
            name:'HNU-----hnu',
            address:'HN',
        }
    },
    mounted(){
        this.$bus.$on('hello',(data)=>{
            console.log('school组件接收到了',data)
        })
    },
    beforeDestroy() {
        console.log('hello被销毁')
       this.$bus.off('hello')
    },
}
</script>

<style scoped>
 .demo{
     background-color:yellow;
 }
</style>

Student.vue

<template>
  <div class='demo'>
      <h1 class="title">{{msg}}</h1>
      <h1>学生名字：{{name}}</h1>
      <h1>学生年龄：{{myAge}}</h1>
      <button @click="send">把学生名字传过去</button>
  </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
            msg:'欢迎!!!',
            name:'江江',
            myAge:18
        }
    },
    methods:{
        send(){
            this.$bus.$emit('hello',this.name)
        }
    }
//    mounted(){
//        console.log('Student',this.x)
//    }
}
</script>

<style lang='less'>
    .demo{
        background-color:pink;
        .title{
            font-size: 16px;
        }
    }
</style>

参考：https://www.cnblogs.com/fsg6/p/13520138.html