消息订阅与发布

zimingyo

已于 2022-09-25 00:09:56 修改

阅读量132

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue初文章标签： javascript vue.js 前端

于 2022-09-24 17:59:37 首次发布

本文链接：https://blog.youkuaiyun.com/zimingyo/article/details/127028215

Vue初专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何使用pubsub-js库进行任意组件间的通信，包括安装、导入、订阅和发布数据的步骤。同时，详细阐述了Vue中$nextTick的作用，它用于确保在DOM更新后执行回调，适用于数据变化后基于新DOM的操作。通过实例展示了在组件生命周期钩子中正确使用这两个工具的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一种组件间通信的方式，适用于任意组件间通信
使用步骤：
（1）安装pubsub:npm i pubsub-js
（2）引入import pubsub from 'pubsub-js'（发收方都要导入）
（3）接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methods(){
	demo(evenName,data){
	  //eventName事件名称,data是发布者传递过来的数据
	}
	......,
},
mounted(){
	//写法一
		this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
	//写法二
		this.pid = pubsub.subscribe('xxx',(eventName,data)=>{
         	console.log(eventName,data) 
		})
		
},
beforeDestory(){
	Pubsub.unsubscribe(pid)
	//取消订阅
}