当前位置: 首页 > news >正文

Vue 消息订阅与发布

消息订阅与发布,也可以实现任意组件之间的通信。

订阅者:就相当于是我们,用于接收数据。

发布者:就相当于是媒体,用于传递数据。

 安装消息订阅与发布插件:

在原生 JS 中 不太容易实现消息订阅与发布,所以我们这里借助第三方库实现 推荐使用 pubsub-js 库 它可以在任意一个框架中使用。

安装命令

npm i pubsub - js


安装完成后在需要使用的组件中引入即可

 消息订阅与发布使用流程:

首先创建 Content.vue 组件用于显示内容。并引入 pubsub-js 插件 通过 pubsub.subscribe 方法订阅消息 接收数据.

<template><div><h2>{{ name }}</h2></div>
</template><script>
import pubsub from "pubsub-js"
export default {name: "Content",data() {return {name: "张三"}},mounted() {// 订阅消息 getNamepubsub.subscribe("getName", (msg, name) => {console.log(msg, name);this.name = name;})// this.$bus.$on("getName", (name) => {//     this.name = name;// })}
}
</script>

然后创建 Edit.vue 组件用于编辑内容 并引入 pubsub-js 插件 通过 pubsub.publish 方法发布消息,传递数据。

<template><div><h2>编辑姓名</h2><input type="text" v-model="name"><button @click="editName">修改</button></div>
</template><script>
import pubsub from "pubsub-js"
export default {name: "Edit",data() {return {name: ''}},methods: {editName() {// 发布消息pubsub.publish("getName", this.name);// this.$bus.$emit("getName", this.name);}}
}
</script>

最后创建 Home.vue 页面,并引用 Content.vue 和 Edit.vue 组件。

<template><div><Content></Content><hr /><Edit></Edit></div>
</template><script>
import Content from "../components/Content"
import Edit from "../components/Edit"
export default {name: "Home",components: { Content, Edit }
}
</script>

:在订阅消息中,会接收到两个参数,第一个是消息名称 第二个才是接收的数据 另外订阅消息的回调函数必须是箭头函数 否则 this 会变成 undefined.

 

:订阅的消息想要销毁时,需要先创建一个变量接收这个消息,然后通过这个变量销毁,类似于清除定时器。

<template><div><h2>{{ name }}</h2></div>
</template><script>
import pubsub from "pubsub-js"
export default {name: "Content",data() {return {name: "张三"}},mounted() {// 订阅消息 getNamethis.pubId = pubsub.subscribe("getName", (msg, name) => {console.log(msg, name);this.name = name;})// this.$bus.$on("getName", (name) => {//     this.name = name;// })},beforeDestroy() {// 取消订阅 getNamepubsub.unsubscribe(this.pubId);// this.$bus.off("getName");}
}
</script>

备注:在 Vue 中还是推荐使用全局事件总线实现组件之间的通信,消息订阅与发布在 Vue 中的使用并不多。

原创作者: 吴小糖

创作时间:2023.4.21

相关文章:

Vue 消息订阅与发布

消息订阅与发布&#xff0c;也可以实现任意组件之间的通信。 订阅者&#xff1a;就相当于是我们&#xff0c;用于接收数据。 发布者&#xff1a;就相当于是媒体&#xff0c;用于传递数据。 安装消息订阅与发布插件&#xff1a; 在原生 JS 中 不太容易实现消息订阅与发布&…...

如何在你的云服务器/云主机上更新并使用最新版本的python(python3.11)

更新并使用最新版本的python3.11 第一步&#xff0c;登录云服务器&#xff0c;并更新系统包 打开您的终端&#xff08;Terminal&#xff09;或使用任意SSH客户端&#xff0c;输入如下命令来登录云主机&#xff1a; ssh 用户名IP地址 在输入密码后&#xff0c;您将成功登录到云…...

python学习——【第八弹】

前言 上篇文章 python学习——【第七弹】学习了python中的可变序列集合&#xff0c;自此python中的序列的学习就完成啦&#xff0c;这篇文章开始学习python中的函数。 函数 在学习其他编程语言的时候我们就了解过函数&#xff1a;函数就是执行特定任何以完成特定功能的一段代…...

铁路应答器传输系统介绍

应答器传输系统 应答器传输系统是安全点式信息传输系统&#xff0c;通过应答器实现地面设备向车载设备传输信息。 应答器可根据应用需求向车载设备传输固定的&#xff08;通过无源应答器&#xff09;或可变的&#xff08;通过有源应答器&#xff09;上行链路数据。 当天线单…...

Baumer工业相机堡盟工业相机如何通过BGAPI SDK直接实现Mono16位深度的图像保存(C#)

Baumer工业相机堡盟工业相机如何通过BGAPI SDK直接实现Mono16位深度的图像保存&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机保存位深度12/16位图像的技术背景代码案例分享1&#xff1a;引用合适的类文件2&#xff1a;通过BGAPI SDK直接保存Mono12/16图像3&#xf…...

C语言入门篇——介绍篇

目录 1、什么是C语言 1、C语言的优点 3、语言标准 4、使用C语言的步骤 5、第一个C语言程序 6、关键字 1、什么是C语言 1972年&#xff0c;贝尔实验室的丹尼斯里奇和肯汤普逊在开发UNIX操作系统时设计了C语言&#xff0c;C语言是在B语言的基础上进行设计。C语言设计的初衷…...

Latex数学公式排版

文章目录 Latex使用最佳方式&#xff1a;读官方文档Latex中的字符数学公式排版1.引入宏包:2.公式排版基础3.数学符号(1).希腊字母(2).指数,上下标,导数(3).分式和根式(4).关系符(5).算符(6).巨算符(7).箭头 Latex使用 最佳方式&#xff1a;读官方文档 The not so short intro…...

【Linux】-关于Linux的指令(上)

作者&#xff1a;小树苗渴望变成参天大树 作者宣言&#xff1a;认真写好每一篇博客 作者gitee:gitee 如 果 你 喜 欢 作 者 的 文 章 &#xff0c;就 给 作 者 点 点 关 注 吧&#xff01; TOC 前言 今天我们来讲关于Linux的基本指令&#xff0c;博主讲的指令会对应着Windows…...

【论文写作】引言写作的四个重要的语言点之时态!!!

在本篇文章当中&#xff0c;我们将着重介绍四个重要的写作语言要点之一的时态&#xff0c;其他语言点如下&#xff1a; 1. 时态 2. 标志性的衔接词 3. 主动、被动语态 4. 段落 1. 简单现在时和现在进行时 时态主要有现在时和现在进行时&#xff0c;看以下两个句子 I live in…...

Super Yolo论文翻译

论文&#xff1a;SuperYOLO: Super Resolution Assisted Object Detection in Multimodal Remote Sensing Imagery【IEEE】 论文地址&#xff1a; IEEE Xplore Full-Text PDF:https://ieeexplore.ieee.org/stamp/stamp.jsp?tp&arnumber10075555项目地址&#xff1a;icey…...

【CocosCreator入门】CocosCreator组件 | ProgressBar(进度条)组件

Cocos Creator 是一款流行的游戏开发引擎&#xff0c;具有丰富的组件和工具&#xff0c;其中的ProgressBar组件是一种用于实现进度条效果的重要组件。它可以让我们在游戏中展示各种进度条效果&#xff0c;例如加载进度条、血条等。 目录 一、组件介绍 二、组件属性 三、脚本…...

大数据数仓维度建模

目录 维度建模分为三种&#xff1a; 1、星型模型&#xff1a; 2、雪花模型&#xff1a; 3、星座模型&#xff1a; 模型的选择&#xff1a; 维度表和事实表&#xff1a; 维度表&#xff1a; 维度表特性 &#xff1a; 事实表&#xff1a; 事实表特性&#xff1a; 事务型…...

ESP32设备驱动-BH1745NUC 亮度和颜色传感器驱动

BH1745NUC 亮度和颜色传感器驱动 文章目录 BH1745NUC 亮度和颜色传感器驱动2、硬件准备3、软件准备4、驱动实现BH1745NUC 是具有 IC 总线接口的数字颜色传感器 IC。 该 IC 感应红光、绿光和蓝光 (RGB) 并将它们转换为数字值。 高灵敏度、宽动态范围和出色的 Ircut 特性使该 IC …...

通达信VCP形态选股公式,憋了好几天才写出来

VCP形态的英文”Volatility Contraction Pattern”的缩写&#xff0c;意思是“波动收缩形态”。VCP形态是全美交易冠军马克米勒维尼的核心交易模式之一&#xff0c;在其著作《股票魔法师》中有详细介绍。 马克米勒维尼把VCP形态比喻为湿毛巾&#xff0c;拧过一次后仍含水&…...

vue 知识储备

vue2 和 vue3 的区别 模块拆分:vue3采用 compnent API 更注重模块上的拆分,而vue2中则需要使用完整的vuejs,无法使用单独的模块重写API:vue2组件方法挂载到实例中未使用也会被打包,vue3通过 tree-shaking机制,实现按需引入,减少用户打包后体积数据双向绑定:vue2使用 Ob…...

MySQL表的增删查改

目录 一 插入 1 基本语法 ①全列插入 ②指定列插入 ③多条记录插入 ④冲突更新 二 查询 查询全部数据 指定列查询 显示 拼接 取别名 去重查找 where 逻辑运算符和比较运算符 结果排序 Limit group by 分组 聚合函数 对于count 对于sum 对于group by 相关的语…...

详解C语言string.h中常用的14个库函数(三)

本篇博客继续讲解C语言string.h头文件中的库函数。本篇博客计划讲解3个函数&#xff0c;分别是&#xff1a;strstr, strtok, strerror。其中strstr函数我会用一种最简单的方式模拟实现。 strstr char * strstr ( const char * str1, const char * str2 );strstr可以在str1中查…...

无人机视频与GIS融合三维实景怎么实现?

无人机视频与GIS融合三维实景怎么实现?无人机三维GIS作为一项新兴的测绘重要手段&#xff0c;具有续航时间长、成本低、机动灵活等优点&#xff0c;为城市的规划建设带来极大便利。 那么此项技术有什么样的特点呢?下面智汇云舟就带大家一起来了解一下。 三维是将采集以及经运…...

瞬间让你效率提高一倍的高效学习方法

方法不对&#xff0c;努力白费&#xff1b;方法对了&#xff0c;事半功倍&#xff01;在学习的过程中我们会遇到各种困难与阻碍&#xff0c;如何发现并优化自己的学习方法就变得尤为重要。高效学习方法是指通过科学的、有效的方法来提高学习效率&#xff0c;实现更好的学习成果…...

442. 数组中重复的数据|||41. 缺失的第一个正数|||485. 最大连续 1 的个数

442. 数组中重复的数据 题目 给你一个长度为 n 的整数数组 nums &#xff0c;其中 nums 的所有整数都在范围 [1, n] 内&#xff0c;且每个整数出现 一次 或 两次 。请你找出所有出现 两次 的整数&#xff0c;并以数组形式返回。 你必须设计并实现一个时间复杂度为 O(n) 且仅…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...