vue全局事件总线是什么?有什么用?解决了什么问题,与pinia有什么区别?
全局事件总线快速入门
- 概念
- 基本概念(是什么?)
- 核心概念
- 核心特性和优势(有什么用?)
- 解决了什么问题?
- 主要优势是什么?
- 案例演示?
- 传递数据-案例演示
- 传递事件-案例演示
- 与pinia有什么区别?
概念
基本概念(是什么?)
Vue全局事件总线
是一种在Vue.js应用程序中进行组件之间通信的机制。它基本上是一个Vue实例,用于在应用程序的不同组件之间传递事件和数据。
核心概念
vue
进行组件之间通信的机制全局事件总线的工作原理是
,你可以在一个组件中触发一个自定义事件,然后在其他组件中监听这个事件并执行相应的操作。这使得不同组件之间可以相互通信,而不必通过props或其他复杂的方法来传递数据。
核心特性和优势(有什么用?)
解决了什么问题?
- 解决父子组件之间或不直接关联的组件之间的通信问题。
主要优势是什么?
- 如果你只需要在不同组件之间传递一些临时数据或触发一些简单的事件,全局事件总线足够,因为它比较轻量且易于使用。适用于简单的组件通信需求。
案例演示?
传递数据-案例演示
当你需要在Vue.js应用程序中使用全局事件总线时,通常的做法是创建一个新的Vue实例,用它来充当事件总线
,并在需要时在组件中使用它来触发和监听事件。以下是一个简单的全局事件总线示例:
首先,在你的Vue.js应用程序中创建一个全局事件总线,你可以在main.js或类似的入口文件中添加以下代码:
import Vue from 'vue';// 创建全局事件总线
export const EventBus = new Vue();
现在,你可以在任何组件中使用EventBus
来触发事件和监听事件。例如,假设你有两个组件,一个是触发事件的组件,另一个是监听事件的组件。
在触发事件的组件中:
<template><button @click="sendMessage">发送消息</button>
</template><script>
import { EventBus } from '@/main'; // 导入全局事件总线export default {methods: {sendMessage() {// 触发一个自定义事件并传递数据EventBus.$emit('message-sent', '这是一条消息');},},
};
</script>
在监听事件的组件中:
<script>
import { EventBus } from '@/main'; // 导入全局事件总线export default {data() {return {receivedMessage: '',};},created() {// 监听自定义事件EventBus.$on('message-sent', (message) => {// 处理接收到的消息this.receivedMessage = message;});},
};
</script>
在这个示例中,当用户在触发事件的组件中点击按钮时,它会触发名为"message-sent"的自定义事件,并将消息数据传递给监听事件的组件,后者在接收到事件后更新数据。
这是一个简单的全局事件总线示例,用于在Vue.js应用程序中进行组件之间的通信。你可以根据自己的需求扩展这个模式来实现更复杂的通信。
传递事件-案例演示
当你需要在Vue.js应用程序中传递自定义事件时,你可以使用Vue的自定义事件机制。以下是一个示例,演示了如何在父组件中触发自定义事件,并在子组件中监听和处理该事件:
首先,创建一个父组件(例如,Parent.vue):
<template><div><button @click="sendEvent">触发自定义事件</button><Child @custom-event="handleCustomEvent" /></div>
</template><script>
import Child from './Child.vue';export default {components: {Child,},methods: {sendEvent() {// 触发自定义事件,并传递数据this.$emit('custom-event', '这是自定义事件的数据');},handleCustomEvent(data) {// 处理从子组件接收到的事件数据console.log('接收到自定义事件:', data);},},
};
</script>
在上面的代码中,父组件通过this.$emit
触发了一个名为"custom-event"的自定义事件,并传递了一些数据。
然后,创建一个子组件(例如,Child.vue):
<template><div><p>子组件</p></div>
</template><script>
export default {mounted() {// 在子组件中监听自定义事件this.$parent.$on('custom-event', this.handleCustomEvent);},beforeDestroy() {// 在销毁子组件之前,取消对事件的监听this.$parent.$off('custom-event', this.handleCustomEvent);},methods: {handleCustomEvent(data) {// 处理父组件触发的自定义事件console.log('子组件接收到自定义事件:', data);// 可以在这里执行子组件的逻辑},},
};
</script>
在子组件中,我们使用this.$parent
(vue用于访问父组件实例的特定属性)来访问父组件,并使用$on
方法来监听父组件触发的自定义事件。在beforeDestroy
生命周期钩子中,取消对事件的监听以避免内存泄漏。
补充:
如果在路由跳转后你不想销毁之前的component可以使用<keep-alive></keep-alive>标签保持组件活跃
<keep-alive><router-view></router-view>
</keep-alive>
现在,当父组件中的按钮被点击时,它将触发自定义事件,子组件将监听并处理这个事件,从而实现了事件的传递和处理。
这个示例演示了在Vue.js中传递自定义事件的基本模式,你可以根据需要扩展它来满足更复杂的组件通信需求。
与pinia有什么区别?
- 全局事件总线和Pinia在数据传递的方式上不同:
-
全局事件总线:
数据或事件通常是临时存储在内存中的
,只在组件之间传递,但不会长期保存。当一个组件触发事件时,其他组件可以监听并获取这些事件的数据
,但这些数据不会在组件之间共享持久状态。 -
Pinia:Pinia是一个状态管理库,它允许你在应用程序中定义和管理全局状态。
Pinia的数据存储是持久的,保存在内存中,以供应用程序中的**所有组件**访问
。这意味着你可以在不同组件之间共享和维护持久状态,而不仅仅是短期的事件数据。
所以,Pinia更适合需要长期共享和管理状态的场景,而全局事件总线更适用于短期的、组件之间的临时数据传递。你可以根据项目的具体需求选择合适的方法。
相关文章:
vue全局事件总线是什么?有什么用?解决了什么问题,与pinia有什么区别?
全局事件总线快速入门 概念基本概念(是什么?)核心概念 核心特性和优势(有什么用?)解决了什么问题?主要优势是什么? 案例演示?传递数据-案例演示传递事件-案例演示 与pinia有什么区别?…...

【debian 12】:debian系统切换中文界面
目录 目录 项目场景 基础参数 原因分析 解决方案 1.ctrlaltT 打开终端 2.查询当前语言环境(我的已经设置成了中文 zh_CN.UTF-8) 3.打开语言配置界面 4.最后一步:重启 不要放弃任何一个机会! 项目场景: 这两…...
es官方为我们提供的堆内存保护机制-熔断器( breaker )
总熔断器(相当于似乎总闸) 参数: indices.breaker.total.use_real_memory 默认值:true 在 elasticsearch.yml中配置。 参数: indices.breaker.total.limit 如果 indices.breaker.total.use_real_memory : true, in…...

靶场通关记录
OSCP系列靶场-Esay-CyberSploit1 总结 getwebshell → 源码注释发现用户名 → robots.txt发现base64密码 → SSH登录 提 权 思 路 → 内网信息收集 → 发现发行版本有点老 → 内核overlayfs提权 准备工作 启动VPN 获取攻击机IP > 192.168.45.220 启动靶机 获取目标机器I…...

全网最新最全的软件测试面试题
一、前言 与开发工程师相比,软件测试工程师前期可能不会太深,但涉及面还是很广的。 在一年左右的实习生或岗位的早期面试中,主要是问一些基本的问题。 涉及到的知识主要包括MySQL数据库的使用、Linux操作系统的使用、软件测试框架问题、测试…...

如何列出 Ubuntu 和 Debian 上已安装的软件包
当你安装了 Ubuntu 并想好好用一用。但在将来某个时候,你肯定会遇到忘记曾经安装了那些软件包。 这个是完全正常。没有人要求你把系统里所有已安装的软件包都记住。但是问题是,如何才能知道已经安装了哪些软件包?如何查看安装过的软件包呢&a…...
图论---最小生成树问题
在连通网的所有生成树中,所有边的代价和最小的生成树,称为最小生成树。解决最小生成树问题一般有两种算法:Kruskal算法和Prim算法。 Kruskal算法 原理:基本思想是从小到大加入边,是个贪心算法。我们将图中的每个边按…...
elementplus 时间范围选择器限制选择时间范围
<el-date-pickerv-model"form.time" type"daterange"range-separator"-"start-placeholder"开始时间"end-placeholder"结束":disabled-date"disabledDate"calendar-Change"calendarChange" />co…...

【网络】抓包工具Wireshark下载安装和基本使用教程
🍁 博主 "开着拖拉机回家"带您 Go to New World.✨🍁 🦄 个人主页——🎐开着拖拉机回家_Linux,大数据运维-CSDN博客 🎐✨🍁 🪁🍁 希望本文能够给您带来一定的帮助…...
Metasequoia 4 水杉3D建模工具 附序列号
Metasequoia 4是一款非常强大的3D水杉建模工具,它基于多边形建模技术,可以用于创建各种对象并支持多种第三方3DCG软件的文件格式,是一款非常适合从爱好到业务,支持3D电脑绘图,3D印刷,游戏开发等的3D建模软件…...
股票杠杆交易平台排名:淘配网推荐的十大平台
在投资世界中,股票杠杆交易一直以其提供更高回报机会的吸引力而备受欢迎。随着市场的不断发展,出现了越来越多的股票杠杆交易平台。本文将为您介绍淘配网推荐的十大股票杠杆交易平台,并分析它们的特点。 富灯网 - 富灯网以其全面的杠杆产品和…...

CoreData + CloudKit 在初始化 Schema 时报错 A Core Data error occurred 的解决
问题现象 如果希望为 CoreData 支持的 App 增加云数据备份和同步功能,那么 CloudKit 是绝佳的选择。CloudKit 会帮我们默默处理好一切,我们基本不用为升级而操心。 不过,有时在用本地 CoreData NSManagedObjectModel 初始化 iCloud 中的 Schema 时会发生如下错误: Error …...

修炼k8s+flink+hdfs+dlink(三:安装dlink)
一:mysql初始化。 mysql -uroot -p123456 create database dinky; grant all privileges on dinky.* to dinky% identified by dinky with grant option; flush privileges;二:上传dinky。 上传至目录/opt/app/dlink tar -zxvf dlink-release-0.7.4.t…...

Linux 系统性能瓶颈分析(超详细)
Author:rab 目录 前言一、性能指标1.1 进程1.1.1 进程定义1.1.2 进程状态1.1.3 进程优先级1.1.4 进程与程序间的关系1.1.5 进程与进程间的关系1.1.6 进程与线程的关系 1.2 内存1.2.1 物理内存与虚拟内存1.2.2 页高速缓存与页写回机制1.2.3 Swap Space 1.3 文件系统1…...

kafka与zookeeper的集群
基础配置 systemctl stop firewalld && systemctl disable firewalld setenforce 0 sed -i s/SELINUXenforcing/SELINUXdisabled/ /etc/selinux/configvi /etc/hosts ip1 node1 ip2 node2 ip3 node3zookeeper介绍 zookeeper是一个分布式的协调服务,主要用…...

sqlalchemy 连接池
报错 sqlalchemy.exc.TimeoutError: QueuePool limit of size 100 overflow 10 reached, connection timed out, timeout 30 (Background on this error at: http://sqlalche.me/e/3o7r) 查看数据库未活动超时时间 show variables like "interactive_timeout";一般…...

用Blender制作YOLO目标检测器训练数据
推荐:用 NSDT编辑器 快速搭建可编程3D场景 本文将介绍一种非常有吸引力的机器学习训练数据的替代方案,用于为给定的特定应用程序收集数据。 无论应用程序类型如何,这篇博文都旨在向读者展示使用 Blender 等开源资源生成合成数据(S…...

c++视觉处理---均值滤波
均值滤波 cv::blur()函数是OpenCV中用于应用均值滤波的函数。均值滤波是一种简单的平滑技术,它计算每个像素周围像素的平均值,并用该平均值替代原始像素值。这有助于降低图像中的噪声,并可以模糊图像的细节。 以下是cv::blur()函数的基本用…...

QT基础入门——Qt事件(五)
前言: 事件(event)是由系统或者 Qt 本身在不同的时刻发出的。当用户按下鼠标、敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件。一些事件在对用户操作做出响应时发出,如键盘事件等&#x…...

自学黑客方法-----(网络安全)
如果你想自学网络安全,首先你必须了解什么是网络安全!,什么是黑客!! 1.无论网络、Web、移动、桌面、云等哪个领域,都有攻与防两面性,例如 Web 安全技术,既有 Web 渗透2.也有 Web 防…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...

3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”(简单设计)是软件开发中的一个重要理念,倡导以最简单的方式实现软件功能,以确保代码清晰易懂、易维护,并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计,遵循“让事情保…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?
现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)ÿ…...