（七）全局事件总线：实现任意组件通信

写法一：

1.全局事件总线是程序员的经验总结，不是已有的API；它可以实现任意组件之间的通信。

2.此处以兄弟组件通信举例。

（1）创建全局事件总线
main.js文件中
  new Vue({
        el:'#app',
        render:h=>h(App),

        beforeCreate(){
        Vue.prototype.$bus = this//安装全局事件总线
//在vue原形上放个$bus,值是vue的实例

   }

})

(2)组件中传递参数
methods:{
        sendName(){
        this.$bus.$emit('hello',666)
    } 
}   

(3)组件中接收参数
 mounted(){
        this.$bus.$on('hello'，(data)=>{console.log('已经接收到了参数',data)})
    },//data就是传递的数据
//解绑hello事件
beforeDestroy(){
        this.$bus.$off('hello')
}

此处$on()中第二个参数可以写成回调函数，也可以写成this.demo,demo是在本组件methods中定义的方法。

3.总结

        发送方：$emit(’事件名称‘，发送的数据)，出发自定义事件

        接收方：$on(’事件名称‘，回调函数)，绑定注册（监听）自定义事件

写法二：

1.创建eventBus文件

import Vue from 'vue'
export default new Vue()
//向外共享一个vue实例

2.对应的两个组件先导入eventBus文件

import $bus from './eventBus'

3.通过$bus.$emit()触发和$bus.$on()监听