Vue2:使用pubsub-js实现组件间通信

一、场景描述

我们学习了全局事件总线,通过自定义事件的方式来进行组件间通信。
现在,再学习一个第三方库pubsub-js,消息订阅与发布的方式来实现组件间通信。

二、使用pubsub-js

1、安装

npm i pubsub-js

2、组件里引入

import pubsub from 'pubsub-js'

3、接收数据的组件

接收数据的组件订阅消息,并配置回调函数,组件销毁前取消订阅。

		  methods(){demo(msgName,data){......}}......mounted() {this.pubId = pubsub.subscribe('xxx',this.demo) //订阅消息}......beforeDestroy(){pubsub.unsubscribe(this.pubId);}

4、提供数据的组件

pubsub.publish('xxx',数据)

三、总结

pubsub-js与全局事件总线的类比
提供数据的组件发布消息(调用publish) 等价于 提供数据的组件调用$emit
接收数据的组件订阅消息(调用subscribe) 等价于 接收数据的组件绑定自定义事件

依然推荐使用全局事件总线来实现组件间通信

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/639815.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

17.JVM-[一篇通]

文章目录 JVM1.JVM 简介 (一个进程有一个JVM)1.1JVM 发展史1.2 JVM 和《Java虚拟机规范》 2.JVM 运行流程2.1JVM 执行流程 3.JVM 运行时数据区3.1 堆(线程共享 一个进程只有一份堆)3.2Java虚拟机栈(线程私有 每个线程都有一份属于自己的栈&am…

Linux网络编程(二-套接字)

目录 一、背景知识 1.1 端口号 1.2 网络字节序 1.3 地址转换函数 二、Socket简介 三、套接字相关的函数 3.1 socket() 3.2 bind() 3.3 connect() 3.4 listen() 3.5 accept() 3.6 read()/recv()/recvfrom() 3.7 send()/sendto() 3.8 close() 四、UPD客服/服务端实…

规范文字引言与材料

撰写引言 什么是引言? 引言又叫前言、绪论、引子、绪言等。 引言写在书或文章的正文前面,是类似序言或导言的部分。 在科研论文中,引言是引导读者了解研究背景、目的、 意义和研究问题的关键部分。对于人工智能方向的论 文,引言…

x-cmd pkg | curl - 极其强大的网络请求处理工具

目录 简介用户首次快速实验指南轻量级网络请求工具安全竞品和相关作品进一步探索 简介 curl(Client for URLs)是一款网络请求工具。 curl 于 1996 年首次发布。它最初被命名为 httpget 后更名为curl。 curl 常用于发送网络请求,它支持多种网…

一条sql是如何运行的

在我们平时使用sql的时候,基本是基于黑盒的使用方式,在客户端输入一条sql语句,然后回显想要的数据,对于mysql server端内部如何运行的以及与存储引擎如何交互的不得而知。 通过下面一幅图,大致描述客户端和服务端交互…

HTML中有哪些属于表单元素?那些属于表格元素?请分别列举5个并说明用途?

在HTML中&#xff0c;有一些元素是专门用于表单的输入和布局&#xff0c;还有一些元素是专门用于表格的显示。以下是五个表单元素和五个表格元素&#xff0c;以及它们的用途&#xff1a; 表单元素&#xff1a; <input>&#xff1a;这是最常用的表单元素&#xff0c;用于…

免费分享Deepl和google谷歌翻译api接口

谷歌翻译API可以帮助用户在不同语言之间进行即时翻译&#xff0c;支持超过 200 种语言的互译功能。 接口亲测是可用&#xff0c;简单而且速度很快。专用跨境电商等业务。 接口地址&#xff1a;https://www.tanshuapi.com/market/detail-98 接口请求测试phthon示例&#xff1a…

什么是VUE 创建第一个VUE实例

一、什么是Vue 概念&#xff1a;Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套 构建用户界面 的 渐进式 框架 Vue2官网&#xff1a;Vue.js 1.什么是构建用户界面 基于数据渲染出用户可以看到的界面 2.什么是渐进式 所谓渐进式就是循序渐进&#xff0c;不一定非得把Vu…

Android 基础技术——addView 流程

笔者希望做一个系列&#xff0c;整理 Android 基础技术&#xff0c;本章是关于 addView 在了解 addView 流程之前&#xff0c;先回答下以下几个问题&#xff1a; PhoneWindow是什么时候创建的&#xff1f; DectorView 是什么&#xff1f; DectorView 是什么时候创建的&#xf…

YAML在python中的基础使用

一、编写一个yaml配置文件 基础语法&#xff1a; 大小写敏感使用缩进表示层级不允许使用制表符\t,只允许使用空格缩进的空格数量不作要求,推荐使用2个空格字符相同层级的元素应保持相同的缩进 一个常见的yaml文件示例&#xff1a; # 当前yaml文档使用到注释、变量、类对象 …

Xilinx FPGA 权威书籍指南 基于Vivado 2018 集成开发环境

ff4889i Verilog数字系统设计教程_夏宇闻 深入浅出玩转FPGA_吴厚航 《深入浅出玩转FPGA》视频教程&#xff1a;35课时 FPGA项目实例资料合集 FPGA从入门到精通.实战篇 数字逻辑基础与Verilog设计 原书第3版 ,斯蒂芬布朗 Xilinx FPGA 权威书籍指南 基于Vivado 2018 集成开…

ABS10-ASEMI智能LED灯具专用ABS10

编辑&#xff1a;ll ABS10-ASEMI智能LED灯具专用ABS10 型号&#xff1a;ABS10 品牌&#xff1a;ASEMI 封装&#xff1a;ABS-4 最大重复峰值反向电压&#xff1a;1000V 最大正向平均整流电流(Vdss)&#xff1a;1A 功率(Pd)&#xff1a;50W 芯片个数&#xff1a;4 引脚数…

曲线生成 | 图解三次样条曲线生成原理(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 什么是样条&#xff1f;2 三次样条曲线原理2.1 曲线插值2.2 边界条件2.3 系数反解 3 算法仿真3.1 ROS C仿真3.2 Python仿真3.3 Matlab仿真 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细…

研学活动报名系统源码开发方案

一、项目背景与目标 &#xff08;一&#xff09;项目背景&#xff1a; 随着教育水平的提高和人们对综合素质培养的需求增加&#xff0c;研学活动作为一种教育方式受到了广大家长和学生的青睐。为了更好地组织和管理研学活动&#xff0c;需要建立一个研学活动报名系统&#xf…

C#,入门教程(22)——函数的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(21)——命名空间&#xff08;namespace&#xff09;与程序结构的基础知识https://blog.csdn.net/beijinghorn/article/details/124140653 一、函数的基本概念 一个软件的结构大体如下&#xff1a; 大厦application: a plaza { --…

【C++】stack与queue的模拟实现

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 前言 stack与queue的实现比较简…

快速上手Flask(三) 在 Flask应用中使用Flask-SQLAlchemy(flask SQLAlchemy模型对象如何json序列化输出)

文章目录 快速上手Flask(三) 在 Flask应用中使用Flask-SQLAlchemySQLAlchemy什么是Flask-SQLAlchemyFlask-SQLAlchemy 和 SQLAlchemy的区别&#xff1f;Flask-SQLAlchemy基本使用安装&#xff1a;快速入门创建模型flask模型对象如何json序列化输出 数据库的增删改查 工作常用总…

轮胎侧偏刚度线性插值方法

一、trucksim取数据 步骤一 步骤二 二、数据导入到matlab中 利用simulink的look up table模块 1是侧偏角&#xff1b;2是垂直载荷&#xff1b;输出是侧向力。 侧向力除以侧偏角就是实时的侧偏刚度。

【LeetCode】每日一题 2024_1_21 分割数组的最大值(二分)

文章目录 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01;题目&#xff1a;分割数组的最大值题目描述代码与解题思路 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 今天是 hard&#xff0c;难受&#xff0c;还好有题解大哥的清晰讲解 题目&a…

C#实现基于Word保护性模板文件的修改

目录 制作一个保护性模板文件 给文件设置保护密码 设计模板内容 限制编辑 进一步的需求 范例运行环境 Office DCOM 配置 设计实现 进一步修改模板文件 设置和取消保护 遍历WORD内容控件 总结 制作一个保护性模板文件 在类似一些OA的自动化处理或审批类系统里&a…