Vue,React组件通讯插件,Pubsub-js订阅与发布

消息订阅与发布

订阅发布模式就是为了针对一对多的数据依赖关系，让多个订阅者同时监听一个数据或多个数据,当这个订阅者订阅数据发生变化时,会通知所有的订阅者完成状态更新

项目中使用Pubsub-js

1.安装pubsub-js

npm install pubsub-js --npm

yarn add pubsub-js --yarn

2.组件中引入pubsub.js

import pubsub from 'pubsub-js'

发布事件的组件内

//通过pubsub.publish发布事件,第一个参数为时间名,第二个参数为传递的数据
data() {
    return {
      text: 'Hello Vue',
    }
  },
methods: {
    hadleSubscribe() {
      pubsub.publish('hello', this.text)
    },
  },

订阅事件的组件内

mounted() {
  this.pubId = pubsub.subscribe('hello', (funcName, value) => {
    console.log(`接受到订阅的方法了,收到的参数为${value}`)
  })
},
//组件销毁前解除一下订阅的事件
beforeDestroy(){
    pubsub.unsubscribe(this.pubId)
}