(有代码示例)Vue 或 JavaScript中使用全局通信的3种方式

在 Vue 或 JavaScript 应用中,可以使用以下库来实现全局事件通信:

  1. Vue.js 中的 EventBus: 在 Vue.js 中,可以使用 EventBus 来实现全局事件通信。EventBus 是一个 Vue 实例,用于在组件之间传递事件。你可以使用 $on$emit$off 方法来监听、触发和移除事件。
// 创建 EventBus
const EventBus = new Vue();// 在组件 A 中监听事件
EventBus.$on('my-event', (payload) => {console.log('Event received:', payload);
});// 在组件 B 中触发事件
EventBus.$emit('my-event', { message: 'Hello from Component B' });// 移除事件监听器
EventBus.$off('my-event');
  1. Vuex: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。使用 Vuex,你可以在应用的所有组件之间共享状态。通过在 Vuex store 中定义 actions 和 mutations,你可以实现全局事件通信。
// 创建 Vuex store
const store = new Vuex.Store({state: {message: ''},mutations: {setMessage(state, payload) {state.message = payload;}},actions: {updateMessage({ commit }, payload) {commit('setMessage', payload);}}
});// 在组件 A 中触发 action
this.$store.dispatch('updateMessage', 'Hello from Component A');// 在组件 B 中获取共享状态
const message = this.$store.state.message;
  1. mitt: mitt 是一个非常轻量级的、独立于框架的事件总线库,可以用于实现全局事件通信。它提供了 onoffemit 方法来监听、移除和触发事件。
import mitt from 'mitt';// 创建 EventBus
const EventBus = mitt();// 监听事件
EventBus.on('my-event', (payload) => {console.log('Event received:', payload);
});// 触发事件
EventBus.emit('my-event', { message: 'Hello from Component A' });// 移除事件监听器
EventBus.off('my-event');

这些库都可以实现全局事件通信,选择哪个库取决于你的需求和项目类型。在 Vue.js 项目中,EventBus 是一种简单的解决方案,而 Vuex 提供了更强大的状态管理功能。如果你需要一个独立于框架的轻量级事件总线库,mitt 是一个很好的选择。

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

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

相关文章

大话设计模式学习笔记

目录 工厂模式策略模式备忘录模式(快照模式)代理模式单例模式迭代器模式访问者模式观察者模式解释器模式命令模式模板方法模式桥接模式适配器模式外观模式享元模式原型模式责任链模式中介者模式装饰模式状态模式 工厂模式 策略模式 核心:封装…

神经网络 | 深度学习背后的数学

神经网分析 机器学习处理的是数据,通过学习输入的数据,从而建立模型,以便预测新的数据的输出 按照类型可以进行如下分类 监督分类 非监督分类 强化学习 神经元 生物学中,人的大脑是由多个神经元互相连接形成网络而构成的。也…

处理无法拉取GitHub库的解决方案

提交和拉取github上的库总是失败,这里记录一下如何使用代理解决。 首先找到端口,记住它的端口 然后使用git命令 # HTTP/HTTPS 协议 git config ––global http.url.proxy http://127.0.0.1:port # 以 Github 为例 git config ––global http.https:/…

四.再谈协议_网络计算器

序言 在之前章节中,我们认识了一些网络的接口,并简单体验了一下网络编程,成功实现了字符串数据的收发,模拟实现了最基本的一个多人聊天室,但是网络编程就仅仅局限于此吗?那还远远不够! 最基本的一点在于&…

ChatGPT Edu版本来啦:支持GPT-4o、自定义GPT、数据分析等

5月31日,OpenAI在官网宣布,推出ChatGPT Edu版本。 据悉,这是一个专门为大学校园提供的ChatGTP,支持GPT-4o、网络搜索、自定义GPT、数据分析、代码生成等功能,可以极大提升学生、老师的学习质量和教学效率。 目前&…

Mac OS 用户开启 8080 端口

开启端口 sudo vim /etc/pf.conf # 开放对应端口 pass out proto tcp from any to any port 8080 # 刷新配置文件 sudo pfctl -f /etc/pf.conf sudo pfctl -e获取本机ip地址 ifconfig en0 | grep inet | grep -v inet6 | awk {print $2}访问指定端口

星创编辑器在投放业务中的落地|得物技术

搭建一个落地页需要涉及到多方合作,需要不断地进行沟通协调。繁杂的流程需要耗费很多的时间,因此我们推动产品重新搭建了一个专门服务于软广投放流程的编辑器——星创,完成广告搭建在投放业务各系统中的闭环。 一、落地页技术架构 名词解释…

贰[2],VisionMaster/.NetCore的WPF应用程序调用控件

1,环境 VisionMaster4.2 VisualStudio2022 WPF/.Net6.0 2,记录原因 .NetFrameWork的WPF应用程序调用添加例程.NetFrameWork的Winform应用程序相应的库,不会出现报错,界面也能正常显示操作,但是.NetCore的程序却总是报错。 2.1,.NetFrameWork的WPF应用程序 注:但是.…

AI绘画SD入门教程:ControlNet篇-Canny边缘检测预处理器

大家好,我是向阳 在本篇中,我来讲讲如何使用预处理器和辅助模型,分别都有些什么作用。 💡 这里说明一下当你调用预处理器而辅助模型显示为无的几种原因: 当已载入SD1.5的模型时,CannyXL的辅助模型不会显示…

【笔记】Sturctured Streaming笔记总结(Python版)

目录 相关资料 一、概述 1.1 基本概念 1.2 两种处理模型 (1)微批处理 (2)持续处理 1.3 Structured Streaming和Spark SQL、Spark Streaming关系 二、编写Structured Streaming程序的基本步骤 三、输入源 3.1 File源 &a…

django 内置 JSON 字段 使用场景

Django 内置的 JSON 字段(JSONField)是在 Django 3.1 版本中引入的,用于处理 JSON 格式的数据。JSONField 允许在数据库表中存储和查询 JSON 数据,并且在与 Python 代码交互时自动转换为合适的 Python 数据类型。以下是一些常见的…

【golang学习之旅】Go中的cron定时任务

系列文章 【golang学习之旅】报错:a declared but not used 【golang学习之旅】Go 的基本数据类型 【golang学习之旅】深入理解字符串string数据类型 【golang学习之旅】go mod tidy 【golang学习之旅】记录一次 panic case : reflect: reflect.Value.SetInt using…

国产打印何去何从?汉印瞄准突破口,推进发展新质生产力

推动发展新质生产力,已成为当前时代的主题,代表着先进生产力的发展方向。 打印行业因其高门槛性和技术复杂性,以及在信息安全领域中的作用,使其在我国“新质生产力”发展中占据关键位置。同时,打印行业融合了高精尖产…

windows10镜像文件官网下载

官网 下载 Windows 10 光盘映像(ISO 文件) https://www.microsoft.com/zh-cn/software-download/windows10ISO/

QT开源 串口调式工具

都是基础的代码不详细解释,代码比较多福利链接

【C++练级之路】【Lv.24】异常

快乐的流畅:个人主页 个人专栏:《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火,在为久候之人燃烧! 文章目录 引言一、异常的概念及定义1.1 异常的概念1.2 异常的定义 二、异常的使用2.1 异常的栈展开匹配2.2 异常的重新…

Window10磁盘的分盘和合并

注意: 当我们c盘不够大需要扩大磁盘空间时,当c盘后面没有未划分的磁盘时候,我们是无法进行扩充c盘的,此时,我们可以先删除后面一个磁盘,再进行扩大。 如下:c盘后没有未分配的空间,…

6月4(信息差)

🌍AI预测极端天气提速5000倍!微软发布Aurora,借AI之眼预测全球风暴 🎄理解老司机,超越老司机!LeapAD:具身智能加持下的双过程自驾系统(上海AI Lab等) 论文题目&#xf…

Flutter开发效率提升1000%,Flutter Quick教程之定义Api(三)

将tab键切换到Response,会出现这么一个界面 这是添加api返回的json数据。比如我们添加一个json数据。 添加完json数据后,右上角有一个删除按钮。要换json数据的话,可以点击清除再重新输入。 这时候,左边的面板上还会显示出 这个的…

Python实现PPT表格的编写包含新建修改插图(收藏备用)

自动创建一个ppt文件并创建好表格 代码要用到pptx库 pip install python-pptx 创建含有表格的ppt文件代码: from pptx import Presentation from pptx.util import Inches# 创建一个PPT对象 ppt Presentation()# 添加一个幻灯片 slide ppt.slides.add_slide(p…