消息订阅与发布

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

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

  1. 一种组件间通信的方式,适用于任意组件间通信
  2. 使用步骤:
    (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)
	//取消订阅
}

(4)提供数据:pubsub.publish('xxx',数据)
(5)最好在beforeDestroy钩子中,用pubsub.unsubscribe()

补充 nextTick

  1. 语法:this.$nextTick(回调函数)
  2. 作用:在下一次DOM更新结束后执行其指定的回调
  3. 使用场景:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值