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)
}