Vue全局事件总线 消息的订阅与发布

一.全局事件总线(GlobalEventBus)

一种可以在任意组件间通信的方式,本质上就是一个对象,它必须满足以下条件

1. 所有的组件对象都必须能看见他
2. 这个对象必须能够使用 $on $emit $off 方法去绑定、触发和解绑事件

使用步骤

1. 定义全局事件总线

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

2. 使用事件总线
   a. 接收数据:A组件想接收数据,则在A组件中给 $bus 绑定自定义事件,事件的回调留在A组件自身

export default {
   methods(){
      demo(data){ ... }
    }
    mounted() {
    this. $bus. $on('xxx', this.demo)
    }
}

b. 提供数据:

this.$bus.$emit('xxx',data)

3. 最好在 beforeDestroy 钩子中,用$off()去解绑当前组件所用到的事件

3.11.消息的订阅与发布(基本不用)

消息订阅与发布(pubsub)消息订阅与发布是一种组件间通信的方式,适用于任意组件间通信
使用步要

1. 安装pubsub:npm i pubsub-js
2. 引入: import pubsub from ‘pubsub-js’
3. 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身

使用方法:

第一种

methods(){
        demo(msgName,data){
        }
    },
    mounted() {
        this.pubId = pubsub.subscibe('xxx',this.demo)
    },

第二种

mounted(){
    this.pubId = pubsub.subscribe('hello',(msgName,data) =>{
    
    })
}

4. 提供数据:pubsub.publish(‘xxx’,data)
5. 最好在 beforeDestroy 钩子中,使用pubsub.unsubscribe(pid)取消订阅