当前位置：首页 > article >正文

Vue学习笔记-消息订阅与发布(pubsub)

article 2025/2/24 18:00:41

消息订阅与发布(pubsub)

一种组件间的通信方式，适用于任意组件间通信

使用步骤：
1. 安装pubsub第三方库npm i pubsub-js
2. 在组件中引入import pubsub from 'pubsub-js'
3. 数据接收方（A组件）：A组件订阅消息，并且订阅消息的回调函数留在A组件自身

methods:{
	/*
	自定义回调函数，第一个参数为订阅的消息名称，第二个参数为消息发布方发布的数据
	*/
	callFun(msgName,data){
		...
	}
]
mounted(){
	/*订阅消息，第一个参数为自定义的消息名称，
	第二个参数为自定义的回调函数
	（如果写匿名函数，需要写成箭头函数，这样能保证this对象是Vue实例）
	返回值为订阅消息的id，将其赋给Vue实例，方便以后销毁
	*/
	this.pubid = pubsub.subscribe('msgName',this.callFun)
},
beforeDestory(){
	//建议在组件销毁时取消订阅
	pubsub.unsubscribe(this.pubid)
}