使用PubSub进行Vue组件间通信

最新推荐文章于 2023-11-14 17:03:51 发布
原创 最新推荐文章于 2023-11-14 17:03:51 发布 · 449 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #vue

本文介绍了如何使用PubSubJS在Vue组件间进行通信。首先解释了PubSubJS是一个JavaScript发布的/订阅库，然后阐述了基本的使用方法，包括安装、订阅消息和发布消息的步骤，并提及了在Vue组件的mounted生命周期中订阅。同时，文章还提到了常用的方法如取消订阅。最后，提供了详细的参考链接以供深入学习。

目录

前言

萌新一只，有错望指正

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元/天 解锁文章
ColaBottler
关注
Vue中消息订阅与发布（pubsub）
weixin_45734902的博客
12-05 904
消息订阅与发布（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 组件间通信方式汇总，总有一款适合你( 附项目实战案例 )
Python+大数据+数据分析+自动化+Vue组件开发
06-28 877
前言 前期分享的 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】 这个项目案例中使用的组件间通信方式是通过 事件绑定与props 接收来实现的，具体使用方式将在下面进行详细介绍，先说说这种方式来实现组件间的通信有什么缺点。 缺点： 以 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】 项目案例中的最外层组件 App.vue 的这段代码里的:checkTodo事件来看。 因为 App.vue 组件的子组件 ListItem.vue 需要调用 App.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 1714
pubsub-js 组件间通信1.简介：这是一个能够在不同组件间传递消息的库，类似android开发中的EvenBus。它支持同步和异步方式发布消息。它被设计为在单进程中使用，在多进程中时不建议使用它。2.使用方式：1>安装：npm install pubsub-js2>引入：import {PubSub} from “pubsub-js”;3>在需要的组件中订阅和取消订阅：componentDid
vue-vue2脚手架9-消息订阅与发布（pubsub）
飘然渡沧海的博客
11-18 589
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 1277
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-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 393
下载 npm add pubsub-js 导入 接收成功
PubSubJS简介，一个利用JavaScript进行发布/订阅的库
热门推荐
且心的专栏
07-19 1万+
很长一段时间里，我一直在致力于为某客户开发大型Web应用程序。为web前端实现发布/订阅式通信，我们使用在body元素上被触发的jQuery自定义事件。这是一个相当巧妙的方法，以确保模块松耦合，因为你事实上只是跟踪用户做什么，而不是哪个模块生成的消息。 这种方法已经被我介绍给我的团队，而且我一直很热心地帮助我的队友知道如何使用它。 我对这个方法一直很满意，我已经在BerlinJS讨论组中发起了
Vue中的消息订阅与发布（pubsub）
李公子的博客
08-09 3256
消息订阅与发布（pubsub） 一种组件间通信的方式，适用于任意组件间通信。 使用步骤： 安装pubsub：npm i pubsub-js 引入:import pubsub from 'pubsub-js' 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。 methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subsc.
vue消息的订阅与发布(pubsub)
m0_53620958的博客
09-09 704
vue中消息的订阅与发布
Vue学习笔记-消息订阅与发布(pubsub)
theLuckyLong的博客
11-14 376
3. 数据接收方（A组件）：A组件订阅消息，并且订阅消息的回调函数留在A组件自身。一种组件间的通信方式，适用于任意组件间通信。1. 安装pubsub第三方库。
一、PubSub 的Vue使用方式
weixin_52834606的博客
05-07 1480
一、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 1252
Vue任意组件通信之消息订阅与发布（pubsub)
Google Cloud Pubsub使用详解(二)
Timmer的博客
12-11 2935
Google Cloud Pubsub(二)——Sub的使用 要接收发布到某个（Topic）主题的消息，必须创建对该主题的（Subscriber）订阅。创建订阅后，只有发布到该主题的消息可用于订阅者应用程序。订阅将（Topic）主题连接到订阅者应用程序，订阅者应用程序接收和处理发布到主题的消息。一个主题可以有多个订阅，但是给定的订阅属于一个主题。 发布/订阅为每个订阅至少传递一次已发布的消息。一旦消息发送给订户，只有订户在有限的时间确认该消息后，pubsub才不会传递重复的数据。订阅可以使用拉或推机制来
pubsub.js在react和vue中使用
hkduan的博客
07-10 557
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组件通信---非父子组件（bus）/任意组件间的通信（pubsub）
muzidigbig的博客
11-20 4290
方式一：bus中央总线 利用总线方式可以平级组件进行通信 无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线。 第一步：我们先来创建中央事件总线，在src/assets/下创建一个eventBus.js,内容如下 import Vue from 'vue' export default new Vue(); ...
Vue.js组件间通信的全方位解析与实战应用指南
- 大型应用的组件通信：当应用规模扩大，组件间通信变得复杂时，可以考虑使用Vuex进行状态管理，统一管理组件间的数据流转。 5. 开发者学习路径： - Vue初学者应从基础的props和自定义事件学起，掌握父子组件间的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值