消息订阅发布
组件间通信方式,适用于任意组件间通信。
消息订阅发布需要使用第三方库,例如可以使用pubsub-js:
# 安装pubsub-js
npm i pubsub-js
使用:
- 引入组件
import pubsub from 'pubsub-js'
- 消息订阅
mounted() {
// 使用subscribe方法订阅消息
// 第1个参数:订阅的消息名,第2个参数:回调函数
// 回调函数的参数:第1个参数:订阅的消息名,第2个参数:接到的数据
this.pubId = pubsub.subscribe('studentNameMsg', (msgName, studentName) => {
this.studentName = studentName;
});
},
beforeDestroy() {
// 取消订阅时,需要根据订阅时返回的id取消订阅
pubsub.unsubscribe(this.pubId);
}
}
- 消息发布
sendStudentName() {
pubsub.publish('studentNameMsg', this.name)
}
pubsub的回调函数中,第一个参数是订阅的消息名,这个参数一般用不到,但是还需要占位,一般使用_
进行占位:
function demo(msgName, studentName) {
// .....
}
// msgName用不到,可以使用_占位
function demo2(_, studentName) {
// ....
}