vue组件通信深入二: pubsub.js

VUE组件通信除了我在VUE组件通信一里面提及的方式之外,还有一种比较常用的通信方式:pubsub.js实现组件之间的通信

一 什么是pubsub.js

pubsub.js是一种发布订阅者模式,它为组件之间的通信提供了更方便快捷的方式.
关于pubsub.js更多内容,请点击

二 在项目快速的运用

为了在项目里快速运用这个库,我们对其进行一个封装

import Vue from 'vue'
import PubSub from 'pubsub-js'

let Plugin = {
    install() {
        const $bus = {
            emit: function (eventId,data) { 
                //消息同步发布
                PubSub.publishSync('global-bus'+ "-" + eventId,data)
            },
        
            emitAsync: function(eventId,data) {
                //消息异步发布
                PubSub.publish('global-bus'+ "-" + eventId,data)
            },
        
            on: function(eventId,cb) {
                PubSub.subscribe('global-bus'+ "-" + eventId,function(msg,data){
                    cb(data)
                })
            },
        
            off: function(...eventIds) {
                eventIds.forEach(_ => {
                    PubSub.unsubscribe('global-bus'+ "-" + _)
                })
            }
        }
        
        //挂载到window上面
        window.$bus = $bus
    }
} 

Vue.use(Plugin)

console.log('global.js is Ready')

利用vue使用插件的方式将pubsub.js引入到自己的项目,这样我们就可以使用了,比如:

在组件A中监听这个事件:

created() {
    $bus.on("a",data => {
      console.log(data)
    })
  },

在B组件中发布事件:

methods: {
    publish(){
      $bus.emit("a","我是a事件")
    }
  }

需要注意的是,pubsub.js是必选先注册监听事件的函数再发布事件,这样才能出发监听事件.

三 实现一个发布订阅者模式

//发布订阅模式
class pubSub {
    constructor() {
        this.eventObj = {}
    }

    //订阅者
    on(eventId,fn){
        if(!(eventId in this.eventObj)) {
            this.eventObj[eventId] = []
        }
        
        //把执行函数放到数组里
        this.eventObj[eventId].push(fn)

        return this
    }

    //发布者
    emit(eventId){
        let _self = this
        //处理参数
        let handleData = Array.prototype.slice.call(arguments,1)

        //遍历事件对象,执行订阅函数
        for(var i=0;i<this.eventObj[eventId].length;i++){ 
            this.eventObj[eventId].forEach(fn => {
                fn.apply(_self,handleData)
            })
        }

        return this
    }
}

let bus = new pubSub()

//订阅事件
bus.on('a',function(data){
    console.log(data)
})

//发布事件
bus.emit('a',"我是a事件")

其实pubsub.js的实现原理与上面也是差不多