46全局事件总线(GlobalEventBus)

全局事件总线(GlobalEventBus)

1关键流程

2全局事件总线(GlobalEventBus)

1.一种组件间通信的方式，适用于任意组件间通信。
2.安装全局事件总线:

new Vue({
    beforeCreate() {
        Vue.prototype.$bus = this 		//安装全局事件总线，$bus就是当前应用的vm
    },
})

3.使用事件总线:

• 1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

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

• 2.提供数据:this.$bus.$emit('xxxx', 数据)

4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

3.全局事件总线实现流程

3.1全局事件总线的要求

• 所有的组件都可以“看见“
• 包含，事件的绑定，解绑，与触发。
  • $on
  • $off
  • $emit

3.2直接添加在window上

虽然可以直接获取数据但是不推荐使用window。

// main.js
// 直接绑定在window上
window.x = { a: 1, b: 2 }

// school
mounted(){
    console.log('school:',window.x)
},
//student
mounted(){
    console.log('student:',window.x)
},

3.3添加在VueComponet上 (x)

每创建一个组件标签时，Vuecomponet所生成的实例对象都是新的。而且VueComponet是生成的: Vue.extend({})

3.4添加在Vue的原型上

定义一个参数x将数据存放其中，可以获取数据。

Vue.prototype.x = {a:1,b:2}	

这样实现了，被所有的组件看见，但是上面没有可调用的方法.

但，我们学过一个重要的关系，通过关系可以实现。

3.4.1 VC实例对象

通过Vue.extend({}) 生成一个全新的VC（VueCompoent）实例对象，并将此对象放置在Vue的原型上。这样就可以实现，全局通信。

      Vue.prototype == VueComponet.prototype.__proto__        显式链（函数）
      VueI.__proto__ == VCI.__proto__.__proto__               隐式链（对象）

// 3. 添加在Vue原型对象上，通过一条重要的关系可以将全局事件连接


// 3.1 这样的定义有点麻烦：vc
const vc = Vue.extend({});      // VueCompoment
const vci = new vc();           // VCI
Vue.prototype.$bus = vci;       // 全局可见，有$on,$off,$emit

3.4.2 vm实例对象

既然已近有了vm，可不可以使用vm,在vue生命周期图中，beforeCreate，是什么都没有做的。可不可以在此直接给当前的vm 放置到Vue的原型对象上？

// 此为最标准的安装事件总线

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


// 全局事件总线一般使用的名称：$bus (总线)

3.4.3 全局事件总线的使用

发送方：触发全局事件总线上的方法。

this.$bus.$emit('hello',this.name)      										

接收方：定义全局事件总线上的方法。

this.$bus.$on('hello',(data)=>{console.log('我是school组件，我收的了',data)})