Vue3使用事件总线(Event Bus)实现发布订阅模式

Vue3使用事件总线(Event Bus)实现发布订阅模式

在Vue.js中,订阅发布模式(也称为发布-订阅模式或Pub/Sub模式)是一种设计模式,用于促进组件或对象之间的松散耦合。这种模式允许组件相互通信,而无需直接相互引用,这有助于提高代码的模块化和可重用性。

在订阅发布模式中,存在两个主要角色:发布者(Publisher)和订阅者(Subscriber)。

  1. 发布者(Publisher):负责发布消息或事件。在Vue中,这通常是通过触发一个自定义事件或更改状态来实现的。

  2. 订阅者(Subscriber):监听并响应发布者发出的消息或事件。在Vue中,组件可以监听这些事件或状态变化,并据此执行特定的动作。

订阅发布模式的关键在于,发布者和订阅者不需要直接相互了解。发布者只需要发布消息,而不关心谁在监听。同样,订阅者只需订阅它感兴趣的消息,而不用关心谁是发布者。

在Vue应用中,这种模式通常通过以下方式实现:

  1. 事件总线(Event Bus):创建一个全局的事件中心,各个组件可以向该中心发布事件或从中订阅事件。Vue实例(new Vue())本身就是一个事件发射器,可以用作事件总线。

  2. Vuex:对于更复杂的应用,Vuex提供了一个集中式存储,允许多个组件共享状态。组件可以响应状态的变化(订阅),或者触发状态的变化(发布)。

这种模式有助于将组件逻辑分离,使得组件更加独立和可重用,同时简化了组件间的通信。

实现

首先,创建一个事件总线:

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

然后,在组件中使用这个事件总线:

发布者组件(Publisher) - 发送事件:

<template><button @click="sendMessage">Send Message</button>
</template><script setup>
import { EventBus } from './eventBus.js';const sendMessage = () => {EventBus.$emit('messageEvent', 'Hello from Publisher!');
};
</script>

订阅者组件(Subscriber) - 监听状态变化:

<template><div>Received Message: {{ message }}</div>
</template><script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';const store = useStore();
const message = computed(() => store.state.message);
</script>

在这个例子中,我们可以看到订阅发布模式如何在Vue中实现,它有助于组件间的通信,同时保持了它们的独立性和可重用性。

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

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

相关文章

python读取xlsx格式的excel

读取excel表格数据最好用的还是pandas库 首先是安装pandas pip install pandas 引入pandas import pandas as pd 读取excel&#xff0c;xlsx格式数据 # 读取xlsx格式的数据 def readexcel():df pd.read_excel("./test.xlsx",headerNone)df.columns df.iloc[4…

《PCI Express体系结构导读》随记 —— 第I篇 第1章 PCI总线的基本知识(17)

接前一篇文章&#xff1a;《PCI Express体系结构导读》随记 —— 第I篇 第1章 PCI总线的基本知识&#xff08;16&#xff09; 1.4 PCI总线的中断机制 PCI总线使用INTA#、INTB#、INTC#和INTD#信号向处理器发出中断请求。这些中断请求信号为低电平有效&#xff0c;并与处理器的中…

kivy中的GridLayout

说明 GridLayout 是 Kivy 框架中的一个布局管理器&#xff0c;它允许你在网格中排列子控件。你可以指定网格的行数和列数&#xff0c;然后添加子控件到网格中。GridLayout 会自动调整子控件的位置和大小&#xff0c;以适应网格的单元格。 在 Kivy 框架中&#xff0c;size_hint…

Plantuml之EBNF语法介绍(二十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

多线程编程设计模式(单例,阻塞队列,定时器,线程池)

&#x1f495;"只有首先看到事情的可能性&#xff0c;才会有发生的机会。"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;多线程编程设计模式(单例,阻塞队列,定时器,线程池) 本文主要讲解多线程编程中常用到的设计模式,包括单例模式,阻塞队列,定时…

基于SpringBoot的校园失物招领网站

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的校园失物招领网站,java…

C语言KR圣经笔记 5.1指针和地址 5.2指针和函数参数

第五章 指针和数组 指针是包含变量地址的变量。在 C 语言中&#xff0c;指针被大量使用&#xff0c;部分原因是有时只能用指针来表达某种计算&#xff0c;而部分原因是相比其他方式&#xff0c;指针通常能带来更紧凑和高效的代码。指针和数组是紧密关联的&#xff1b;本章也讲…

2024年【安全员-B证】考试报名及安全员-B证新版试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全员-B证考试报名考前必练&#xff01;安全生产模拟考试一点通每个月更新安全员-B证新版试题题目及答案&#xff01;多做几遍&#xff0c;其实通过安全员-B证考试试题很简单。 1、【多选题】《中华人民共和国消防法…

深入理解WPF MVVM:探索数据绑定与命令的优雅之道

引言&#xff1a; WPF&#xff08;Windows Presentation Foundation&#xff09;是一种用于创建富客户端应用程序的框架&#xff0c;而MVVM&#xff08;Model-View-ViewModel&#xff09;则是一种在WPF中使用的架构模式。MVVM提供了一种优雅的方式来组织和管理应用程序的代码&a…

(2023)PanGu-Draw:通过时间解耦训练和可重用的 Coop-Diffusion 推进资源高效的文本到图像合成

PanGu-Draw: Advancing Resource-Efficient Text-to-Image Synthesis with Time-Decoupled Training and Reusable Coop-Diffusion 公众&#xff1a;EDPJ&#xff08;添加 VX&#xff1a;CV_EDPJ 或直接进 Q 交流群&#xff1a;922230617 获取资料&#xff09; 目录 0. 摘要…

UNIAPP中借助store+watch完成实时数据

简介 手机端蓝牙连接校验仪&#xff0c;校验仪上传校验数据至手机完成展示。基于watch&#xff0c;完成实时展示数据。对象放在store中。实现分为store中的配置&#xff0c;数据接收&#xff0c;数据展示 store配置 在state中配置属性&#xff0c;在mutations中配置更新方法…

【数据结构与算法】字符串匹配(头歌习题)【合集】

目录 第1关&#xff1a;实现朴素的字符串匹配任务描述相关知识编程要求评测说明完整代码 第2关&#xff1a;实现KMP字符串匹配任务描述相关知识编程要求评测说明完整代码 第3关&#xff1a;【模板】KMP算法任务描述相关知识C STL容器string1、string的定义2、string中内容的访问…

16.综合项目实战

一、基础演练&#xff1a; 1、建库、建表 # 创建数据库 create database mysql_exampleTest; use mysql_exampleTest; # 学生表 CREATE TABLE Student( s_id VARCHAR(20), s_name VARCHAR(20) NOT NULL DEFAULT , s_birth VARCHAR(20) NOT NULL DEFAULT , s_sex VARC…

pytorch中的torch.squeeze和torch.unsqueeze

torch.squeeze(input, dimNone) → Tensortorch.unsqueeze()函数的作用减少数组input指定的维度dim&#xff0c;如果dim不指定&#xff0c;则删除大小为1的维度。返回一个tensor。 如果数组A的维度为&#xff08;1&#xff0c;1&#xff0c;3&#xff09;那么执行 torch.squeez…

微信小程序有几个文件

微信小程序通常由多个文件组成&#xff0c;主要包括以下几种类型的文件&#xff1a; JSON 配置文件&#xff1a; app.json: 整个小程序的全局配置&#xff0c;包括页面路径、窗口样式、网络超时时间等。 page.json: 单个页面的配置&#xff0c;用于指定该页面的窗口样式、导航…

ChatGPT 对SEO的影响

ChatGPT 的兴起是否预示着 SEO 的终结&#xff1f; 一点也不。事实上&#xff0c;如果使用得当&#xff0c;它可以让你的 SEO 工作变得更加容易。 强调“正确使用时”。 你可以使用ChatGPT来帮助进行关键字研究的头脑风暴部分、重新措辞你的内容、生成架构标记等等。 但你不…

MathType 运行时错误‘53’:文件未找到:MathPage.WLL_文件未找到mathpage.wll

问题描述 环境 MathType7.4Microsoft Office 365Windows 11 问题 情景1. Microsoft Word 启动时显示 Please reload Word to load MathType addin properly 情景2. 安装MathType后在 Microsoft Word 中使用复制粘贴时报错 运行时错误‘53’ 情景3. 在 Microsoft Word 中使用 M…

Jenkins 系列:Jenkins 安装(Windows、Mac、Centos)和简介

文章目录 简介发展历史应用场景 Jenkins 安装部署先决条件硬件要求软件包下载war 包部署linux 系统部署mac 系统部署windows 系统部署安装后基本配置解锁自定义 jenkins 插件创建用户配置更新站点 配置文件 简介 Jenkins前身是 Hudson&#xff0c;使用 java 语言开发的自动化发…

mxxWechatBot微信机器人V2使用教程(图文)最全最详细

大家伙&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 先看这里 mxxWechatBot功能列表一、前言二、适用人群三、准备工作四、获取账号五、下载资料 六、安装相关软件七、启动客户端八、注入并启动微信九、机器人的基本配置十、自定义接口开发 …

2023年总结2024年展望

这一年技术性的博客写的比较少&#xff0c;更多的时间是在赶项目和考试 从大年初四开始到公司加班赶项目&#xff0c;这一年过得紧张而充实&#xff0c;也尝试了不少新技术&#xff0c;技能有所提升&#xff0c;希望在2024年&#xff0c;和小伙伴们一起&#xff0c;能够持续聚…