vue-消息订阅与发布

2022-07-03  本文已影响0人  tutututudou

消息订阅与发布

这第三方库,可以让组件之间相互通信

安装如下:

//这是我们选择的库
npm i pubsub-js

需要订阅和发布的组件导入这个包

import pub from 'pubsub-js'

shool.vue

 // 接收消息,消息名是sendMsg
  this.pubId = pub.subscribe('sendMsg',(msgName,data) =>{
    console.log('--shool组件收到消息了--',data)
  })

第一个参数msgName,打印的是发布名sendMsg,第二个参数data才是接收发布的数据
但是一般不需要第一个参数,所以可以用_来占位第一个参数;如下:

//用this是为了指定为组件实例对象,不然this就是subscribe的实例对象
 this.pubId = pub.subscribe('sendMsg',(_,data) =>{
    console.log('--shool组件收到消息了--',data)
  })

test.vue

//发布消息,API是publish
   pub.publish('sendMsg',444)

shool.vue取消订阅

//在销毁前取消订阅,this.pubId这是指定哪个订阅
beforeDestroy(){
   pub.unsubscribe(this.pubId)
 }
上一篇下一篇

猜你喜欢

热点阅读