vue 消息订阅与发布 实现任意组件间的通信
一、 安装pubsub
npm i pubsub-js
二、 import
引入
import pubsub from 'pubsub-js'
3、订阅
接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
methods(){
demo(data){......}
}
......
mounted() {
this.pubId = pubsub.subscribe('msgName',this.demo) //订阅消息执行demo回调函数
}
箭头函数写法:
mounted() {
this.pubId = pubsub.subscribe('msgName',('msgName',data)=>{}) //订阅消息执行demo回调函数
}
注意:回调函数中的第一个参数固定是消息名称,是固定写法,第二个参数才是传过来的数据,基本上这个函数的回调方法的第一个参数msgName
是没用到的,所以可以使用英文下划线代替 _
this.pubId = pubsub.subscribe('msgName',(_,data)=>{})
最好在beforeDestroy
钩子中,用PubSub.unsubscribe(pubId)
去取消订阅。
beforeDestroy() {
pubsub.unsubscribe(this.pubId) //接收的是一个订阅消息的Id,不是消息名称
}
四、发布消息,提供数据
pubsub.publish('msgName',数据)