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 消息订阅与发布
消息订阅与发布,也可以实现任意组件之间的通信。 订阅者:就相当于是我们,用于接收数据。 发布者:就相当于是媒体,用于传递数据。 安装消息订阅与发布插件: 在原生 JS 中 不太容易实现消息订阅与发布&…...
如何在你的云服务器/云主机上更新并使用最新版本的python(python3.11)
更新并使用最新版本的python3.11 第一步,登录云服务器,并更新系统包 打开您的终端(Terminal)或使用任意SSH客户端,输入如下命令来登录云主机: ssh 用户名IP地址 在输入密码后,您将成功登录到云…...
python学习——【第八弹】
前言 上篇文章 python学习——【第七弹】学习了python中的可变序列集合,自此python中的序列的学习就完成啦,这篇文章开始学习python中的函数。 函数 在学习其他编程语言的时候我们就了解过函数:函数就是执行特定任何以完成特定功能的一段代…...
铁路应答器传输系统介绍
应答器传输系统 应答器传输系统是安全点式信息传输系统,通过应答器实现地面设备向车载设备传输信息。 应答器可根据应用需求向车载设备传输固定的(通过无源应答器)或可变的(通过有源应答器)上行链路数据。 当天线单…...
Baumer工业相机堡盟工业相机如何通过BGAPI SDK直接实现Mono16位深度的图像保存(C#)
Baumer工业相机堡盟工业相机如何通过BGAPI SDK直接实现Mono16位深度的图像保存(C#) Baumer工业相机Baumer工业相机保存位深度12/16位图像的技术背景代码案例分享1:引用合适的类文件2:通过BGAPI SDK直接保存Mono12/16图像3…...
C语言入门篇——介绍篇
目录 1、什么是C语言 1、C语言的优点 3、语言标准 4、使用C语言的步骤 5、第一个C语言程序 6、关键字 1、什么是C语言 1972年,贝尔实验室的丹尼斯里奇和肯汤普逊在开发UNIX操作系统时设计了C语言,C语言是在B语言的基础上进行设计。C语言设计的初衷…...
Latex数学公式排版
文章目录 Latex使用最佳方式:读官方文档Latex中的字符数学公式排版1.引入宏包:2.公式排版基础3.数学符号(1).希腊字母(2).指数,上下标,导数(3).分式和根式(4).关系符(5).算符(6).巨算符(7).箭头 Latex使用 最佳方式:读官方文档 The not so short intro…...
【Linux】-关于Linux的指令(上)
作者:小树苗渴望变成参天大树 作者宣言:认真写好每一篇博客 作者gitee:gitee 如 果 你 喜 欢 作 者 的 文 章 ,就 给 作 者 点 点 关 注 吧! TOC 前言 今天我们来讲关于Linux的基本指令,博主讲的指令会对应着Windows…...
【论文写作】引言写作的四个重要的语言点之时态!!!
在本篇文章当中,我们将着重介绍四个重要的写作语言要点之一的时态,其他语言点如下: 1. 时态 2. 标志性的衔接词 3. 主动、被动语态 4. 段落 1. 简单现在时和现在进行时 时态主要有现在时和现在进行时,看以下两个句子 I live in…...
Super Yolo论文翻译
论文:SuperYOLO: Super Resolution Assisted Object Detection in Multimodal Remote Sensing Imagery【IEEE】 论文地址: IEEE Xplore Full-Text PDF:https://ieeexplore.ieee.org/stamp/stamp.jsp?tp&arnumber10075555项目地址:icey…...
【CocosCreator入门】CocosCreator组件 | ProgressBar(进度条)组件
Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中的ProgressBar组件是一种用于实现进度条效果的重要组件。它可以让我们在游戏中展示各种进度条效果,例如加载进度条、血条等。 目录 一、组件介绍 二、组件属性 三、脚本…...
大数据数仓维度建模
目录 维度建模分为三种: 1、星型模型: 2、雪花模型: 3、星座模型: 模型的选择: 维度表和事实表: 维度表: 维度表特性 : 事实表: 事实表特性: 事务型…...
ESP32设备驱动-BH1745NUC 亮度和颜色传感器驱动
BH1745NUC 亮度和颜色传感器驱动 文章目录 BH1745NUC 亮度和颜色传感器驱动2、硬件准备3、软件准备4、驱动实现BH1745NUC 是具有 IC 总线接口的数字颜色传感器 IC。 该 IC 感应红光、绿光和蓝光 (RGB) 并将它们转换为数字值。 高灵敏度、宽动态范围和出色的 Ircut 特性使该 IC …...
通达信VCP形态选股公式,憋了好几天才写出来
VCP形态的英文”Volatility Contraction Pattern”的缩写,意思是“波动收缩形态”。VCP形态是全美交易冠军马克米勒维尼的核心交易模式之一,在其著作《股票魔法师》中有详细介绍。 马克米勒维尼把VCP形态比喻为湿毛巾,拧过一次后仍含水&…...
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个函数,分别是:strstr, strtok, strerror。其中strstr函数我会用一种最简单的方式模拟实现。 strstr char * strstr ( const char * str1, const char * str2 );strstr可以在str1中查…...
无人机视频与GIS融合三维实景怎么实现?
无人机视频与GIS融合三维实景怎么实现?无人机三维GIS作为一项新兴的测绘重要手段,具有续航时间长、成本低、机动灵活等优点,为城市的规划建设带来极大便利。 那么此项技术有什么样的特点呢?下面智汇云舟就带大家一起来了解一下。 三维是将采集以及经运…...
瞬间让你效率提高一倍的高效学习方法
方法不对,努力白费;方法对了,事半功倍!在学习的过程中我们会遇到各种困难与阻碍,如何发现并优化自己的学习方法就变得尤为重要。高效学习方法是指通过科学的、有效的方法来提高学习效率,实现更好的学习成果…...
442. 数组中重复的数据|||41. 缺失的第一个正数|||485. 最大连续 1 的个数
442. 数组中重复的数据 题目 给你一个长度为 n 的整数数组 nums ,其中 nums 的所有整数都在范围 [1, n] 内,且每个整数出现 一次 或 两次 。请你找出所有出现 两次 的整数,并以数组形式返回。 你必须设计并实现一个时间复杂度为 O(n) 且仅…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
