Vue的消息订阅与发布

最新推荐文章于 2025-04-11 17:35:50 发布

AI251

最新推荐文章于 2025-04-11 17:35:50 发布

阅读量257

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_61687046/article/details/125812481

版权

这篇博客介绍了如何利用pubsub-js库在Vue组件间进行简单通信。首先通过npm安装，然后在需要通信的组件中引入并订阅及发布主题。订阅时在组件的mounted钩子中进行，解除订阅则在beforeDestroy钩子中完成，确保组件生命周期的正确管理。示例代码展示了订阅和发布数据的方法。

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

非常简单的使用pubsub-js库，用于任意组件间通信。、

使用步骤：

1.npm i pubsub-js

2.在需要使用的地方引入pubsub

import pubsub from 'pubsub-js'

3.接受数据pubsub.subscribe（'demo'，回调函数（放在组件自身）)

methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',(_,data)=>{
				console.log(this)
	// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
    //msgName是消息的名字一般不用，用下划线占用 _
			}) //订阅消息
}

4.发送数据pubsub.publish（'demo',数据）

methods: {
			sendStudentName(){
				pubsub.publish('demo',666)
			}
},

最后最好在发布订阅的同时，在组件中用beforeDestroy钩子中，去取消订阅（pubsub.unsubscribe）

beforeDestroy(){
			pubsub.unsubscribe(this.pubId)
		}