使用PubSub进行Vue组件间通信

最新推荐文章于 2025-06-15 11:13:50 发布
最新推荐文章于 2025-06-15 11:13:50 发布
阅读量437 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HumorousZWJ/article/details/104064398
本文介绍了如何使用PubSubJS在Vue组件间进行通信。首先解释了PubSubJS是一个JavaScript发布的/订阅库，然后阐述了基本的使用方法，包括安装、订阅消息和发布消息的步骤，并提及了在Vue组件的mounted生命周期中订阅。同时，文章还提到了常用的方法如取消订阅。最后，提供了详细的参考链接以供深入学习。

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

目录

前言

萌新一只，有错望指正

PubSubJS是什么

PubSubJS is a topic-based publish/subscribe library written in JavaScript.即 一个利用JavaScript进行发布/订阅的库
在vue中我们可以近似认为：

  • 订阅消息 ——绑定事件监听
  • 发布消息 ——触发回调函数

基本使用方法

  1. 下载PubSubJS库：npm install --save pubsub-js 安装模块到项目 node_modules 目录下
  2. 在需要通信的两个组件间分别引入模块：import PubSub from 'pubsub-js'
  3. 在需要接收数据的组件上订阅消息（mounted 生命周期回调函数在初始化显示后会被立即调用一次，常用来执行一些异步代码）
mounted () {
   
   
	PubSub.subscribe(
最低0.47元/天 解锁文章

200万优质内容无限畅学
ColaBottler
关注
Vue 组件间通信方式汇总，总有一款适合你( 附项目实战案例 )
Python+大数据+数据分析+自动化+Vue组件开发
06-28 850
前言 前期分享的 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】 这个项目案例中使用的组件间通信方式是通过 事件绑定与props 接收来实现的，具体使用方式将在下面进行详细介绍，先说说这种方式来实现组件间的通信有什么缺点。 缺点： 以 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】 项目案例中的最外层组件 App.vue 的这段代码里的:checkTodo事件来看。 因为 App.vue 组件的子组件 ListItem.vue 需要调用 App.vue
vue消息的订阅与发布(pubsub)
m0_53620958的博客
09-09 675
vue中消息的订阅与发布
libp2p-pubsub-vue
02-18
LibP2P + PubSub + Vue应用 关于如何在Vue使用libp2p + pub-sub最小演示。 您可以将消息发送到公共聊天，也可以定向到特定的对等ID。 该项目使用引导。 在你开始之前 首先克隆此仓库，在项目根目录中安装依赖项并构建项目。 $ git clone https://github.com/filipesoccol/libp2p-pubsub-vue $ cd libp2p-pubsub-vue $ npm install $ npm run build 编译和热重装以进行开发 $ npm run serve 编译并最小化生产 $ npm run build 运行部署到github页面 $ npm run deploy 运行测试 $ npm run test 整理和修复文件 $ npm run lint 信令服务器很重要 验证信令服务器，以防两个对等方彼此看不
pubsub-js 实现RN组件间通信
AC的博客
09-26 1689
pubsub-js 组件间通信1.简介：这是一个能够在不同组件间传递消息的库，类似android开发中的EvenBus。它支持同步和异步方式发布消息。它被设计为在单进程中使用，在多进程中时不建议使用它。2.使用方式：1>安装：npm install pubsub-js2>引入：import {PubSub} from “pubsub-js”;3>在需要的组件中订阅和取消订阅：componentDid
React组件通信——发布订阅（pub/sub）
最新发布
anxinbuxinan的博客
06-15 234
PubSubJS 是一个轻量级的发布-订阅(publish-subscribe)模式库，可以在 React 应用中实现组件间的松耦合通信，特别适合非父子组件或远房组件间的消息传递。通信双方不需要知道彼此存在一对多的消息分发需求需要降低系统耦合度需要支持未来未知的订阅者跨团队/跨模块协作开发。
vue-vue2脚手架9-消息订阅与发布（pubsub）
飘然渡沧海的博客
11-18 564
vue-vue2脚手架8-消息订阅与发布（pubsub） pubsub的安装与介绍 一种组件间通信的方式，适用于任意组件间通信。 使用步骤： 安装pubsub：npm i pubsub-js 引入: import pubsub from 'pubsub-js' 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。 methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.sub
Vue——PubSub.js
qq_45997679的博客
04-11 1212
1、组件间通信：消息的订阅与发布（PubSub.js） 使用PubSub可以在Vue任意组件间进行传值，无需要进行中间层层传递。 2、消息的发布。 首先是组件发布消息，发布另一个页面需要的data。 语法：PubSub.publish('msg', data) 实例： <script> import PubSub from 'pubsub-js' // 首先在此导入PubSub export default { data () { return { curIndex:
Vue中消息订阅与发布（pubsub）
weixin_45734902的博客
12-05 882
消息订阅与发布（pubsub） 一种组件间通信的方式，适用于任意组件间通信。 使用步骤： 安装pubsub：npm i pubsub-js 引入: import pubsub from 'pubsub-js' 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。 methods(){ demo(data){......} } ...... mounted() { //this.pid = pubsub.subscribe('xxx',this.demo)
Vue组件间的通信pubsub-js实现步骤解析
10-15
要实现Vue组件间的通信使用pubsub-js，需要按照以下步骤进行： 1. 安装pubsub-js库： 可以通过npm命令进行安装，确保在项目中作为依赖加入。使用命令： ``` npm install --save pubsub-js ``` 这一步骤会将pubsub-...
pubsub发布订阅，vue组件间通信
08-31
pubsub发布订阅，vue组件间通信
前端开发中的Vue.js组件间通信全解析：技术实现与应用场景
03-10
本文全面介绍Vue.js框架中不同类型的组件通信方式，涵盖从简单的父子组件间通信（如props传递、ref获取、自定义事件触发），到复杂的非父子组件间通信解决方案（如$attrs与$listeners、全局事件总线、pubsub消息订阅...
pubsub-js的使用
weixin_50736511的博客
09-15 370
下载 npm add pubsub-js 导入 接收成功
PubSubJS简介，一个利用JavaScript进行发布/订阅的库
热门推荐
且心的专栏
07-19 1万+
很长一段时间里，我一直在致力于为某客户开发大型Web应用程序。为web前端实现发布/订阅式通信，我们使用在body元素上被触发的jQuery自定义事件。这是一个相当巧妙的方法，以确保模块松耦合，因为你事实上只是跟踪用户做什么，而不是哪个模块生成的消息。 这种方法已经被我介绍给我的团队，而且我一直很热心地帮助我的队友知道如何使用它。 我对这个方法一直很满意，我已经在BerlinJS讨论组中发起了
Vue中的消息订阅与发布（pubsub）
李公子的博客
08-09 3219
消息订阅与发布（pubsub） 一种组件间通信的方式，适用于任意组件间通信。 使用步骤： 安装pubsub：npm i pubsub-js 引入:import pubsub from 'pubsub-js' 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。 methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subsc.
Vue学习笔记-消息订阅与发布(pubsub)
theLuckyLong的博客
11-14 360
3. 数据接收方（A组件）：A组件订阅消息，并且订阅消息的回调函数留在A组件自身。一种组件间的通信方式，适用于任意组件间通信。1. 安装pubsub第三方库。
一、PubSub 的Vue使用方式
weixin_52834606的博客
05-07 1459
一、PubSub 的使用 PubSub-Js 是消息队列，用来传递消息的。可以使用Vue中来代替自定义事件的传递数据的方式，简单快捷。 1.在终端进行pubsub的安装 npm i pubsub-js 2.导入pubsub全局使用 Main.js中执行 import PubSub from 'pubsub-js' Vue.prototype.PubSub = PubSub 3.消息发布 this.Publish("msg","要发送的消息") 4.接收消息（订阅消息） /**
Vue任意组件通信之消息订阅与发布（pubsub）
m0_56219678的博客
02-04 1227
Vue任意组件通信之消息订阅与发布（pubsub)
Google Cloud Pubsub使用详解(二)
Timmer的博客
12-11 2773
Google Cloud Pubsub(二)——Sub的使用 要接收发布到某个（Topic）主题的消息，必须创建对该主题的（Subscriber）订阅。创建订阅后，只有发布到该主题的消息可用于订阅者应用程序。订阅将（Topic）主题连接到订阅者应用程序，订阅者应用程序接收和处理发布到主题的消息。一个主题可以有多个订阅，但是给定的订阅属于一个主题。 发布/订阅为每个订阅至少传递一次已发布的消息。一旦消息发送给订户，只有订户在有限的时间确认该消息后，pubsub才不会传递重复的数据。订阅可以使用拉或推机制来
pubsub.js在react和vue中使用
hkduan的博客
07-10 536
pubsub 最基础 的使用方法 react和vue的组件通信都可以用这个第三方pubsub.js 发布 import Pubsub from 'pubsub-js' export const pubsubID = 'd806a360-21aa-406e-9e5f-7f375087514f' // pubsub token Pubsub.publish(StationStatisticsID, data) // 或 PubSub.publishSync(StationStatisticsID, data)
Vue.js组件间通信的全方位解析与实战应用指南
- 大型应用的组件通信：当应用规模扩大，组件间通信变得复杂时，可以考虑使用Vuex进行状态管理，统一管理组件间的数据流转。 5. 开发者学习路径： - Vue初学者应从基础的props和自定义事件学起，掌握父子组件间的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值