vue全局事件总线是什么?有什么用?解决了什么问题,与pinia有什么区别?

全局事件总线快速入门

  • 概念
    • 基本概念(是什么?)
    • 核心概念
  • 核心特性和优势(有什么用?)
    • 解决了什么问题?
    • 主要优势是什么?
  • 案例演示?
    • 传递数据-案例演示
    • 传递事件-案例演示
  • 与pinia有什么区别?


概念

基本概念(是什么?)

  • Vue全局事件总线是一种在Vue.js应用程序中进行组件之间通信的机制。它基本上是一个Vue实例,用于在应用程序的不同组件之间传递事件和数据。

核心概念

  • vue进行组件之间通信的机制
  • 全局事件总线的工作原理是,你可以在一个组件中触发一个自定义事件,然后在其他组件中监听这个事件并执行相应的操作。这使得不同组件之间可以相互通信,而不必通过props或其他复杂的方法来传递数据。

核心特性和优势(有什么用?)

解决了什么问题?

  • 解决父子组件之间或不直接关联的组件之间的通信问题。

主要优势是什么?

  • 如果你只需要在不同组件之间传递一些临时数据或触发一些简单的事件,全局事件总线足够,因为它比较轻量且易于使用。适用于简单的组件通信需求。

案例演示?

传递数据-案例演示

当你需要在Vue.js应用程序中使用全局事件总线时,通常的做法是将全局总线$bus挂载到vue原型对象上,并在需要时在组件中使用它来触发和监听事件。以下是一个简单的全局事件总线示例:

首先,在你的Vue.js应用程序中注册一个全局事件总线,你可以在main.js或类似的入口文件中添加以下代码:

import Vue from 'vue'
import App from './App.vue'
import router from '@/routers/router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App),beforeCreate() {// 挂载全局事件总线到vue原型对象上Vue.prototype.$bus = this}
}).$mount('#app')

创建路由表router.js文件添加以下内容:

//作用是将指定的路由地址切换成对应的模块
// eslint-disable-next-line no-unused-vars
import Router from "vue-router"
// eslint-disable-next-line no-unused-vars
import Vue from "vue"
//在Vue中加载路由模块
Vue.use(Router)const routes = [// 进入vue项目默认进入登录页面{path: "/",redirect: "/HelloWord"},{path: "/HelloWord",component: () => import("@/components/HelloWorld.vue"),meta: {skipAuthCheck: true // 添加一个标记,表示不需要进行身份验证检查}},{path: "/index",component: () => import("@/components/child.vue"),meta: {skipAuthCheck: true // 添加一个标记,表示不需要进行身份验证检查}},
]const router = new Router({routes
});// 导出vue路由表
export default router;

现在,你可以在任何组件中使用this.$bus来触发事件和监听事件。例如,假设你有两个组件,一个是触发事件的组件,另一个是监听事件的组件。

在触发事件的组件中:

<!-- eslint-disable vue/multi-word-component-names -->
<template><div class="child">{{msg}}</div>
</template><script>
export default {data() {return {msg: "小米加步枪",};},mounted() {console.log("进入child");// 组件挂载时触发自定义事件 传递数据this.msgthis.$bus.$emit('message-sent', this.msg);},
};
</script>

在监听事件的组件中:

<script>
<template><div class="hello"><router-link to="/index"><button @click="sendMessage">购物</button></router-link></div>
</template><script>
// 导入传递组件
import childComponent from '@/components/child.vue';
export default {name: 'HelloWorld',components: {// eslint-disable-next-line vue/no-unused-componentschildComponent,},methods: {sendMessage() {//监听一个自定义事件并处理this.$bus.$on('message-sent',(message) => {console.log(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在数据传递的方式上不同:
  1. 全局事件总线:数据或事件通常是临时存储在内存中的,只在组件之间传递,但不会长期保存。当一个组件触发事件时,其他组件可以监听并获取这些事件的数据,但这些数据不会在组件之间共享持久状态。

  2. Pinia:Pinia是一个状态管理库,它允许你在应用程序中定义和管理全局状态。Pinia的数据存储是持久的,保存在内存中,以供应用程序中的**所有组件**访问。这意味着你可以在不同组件之间共享和维护持久状态,而不仅仅是短期的事件数据。

所以,Pinia更适合需要长期共享和管理状态的场景,而全局事件总线更适用于短期的、组件之间的临时数据传递。你可以根据项目的具体需求选择合适的方法。

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

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

相关文章

Lambda表达式在C++中的定义

目录 背景介绍&#xff1a; Lambda表达式的定义&#xff1a; Lambda结构介绍&#xff1a; 1. Lambda capture 2. Lambda parameter list 3. Lambda mutable 4. Lambda return type 5. Lambda 主体 Lambda 表达式小结&#xff1a; Lambda 引用参考&#xff1a; 背景介…

短视频平台的那些事

短视频平台的那些事 文章目录 短视频平台的那些事1. 前言2. 概览介绍3. 业务框架4. 关键技术能力4.1 视频处理4.1.1 FFMPEG技术 4.2 视频安全&#xff0c;合规4.2.1 视频安全审核4.2.2 视频MD5校验4.2.3 视频AI指纹 4.3 视频内容理解4.3.1 视频分类4.3.2 视频标签4.3.3 视频质量…

windows docker desktop配置加速地址

目录 为什么常见加速地址在docker desktop上配置 为什么 https://hub.docker.com 是官方的镜像仓库地址&#xff0c;但是它的服务器地址是在国外&#xff0c;有时候访问和下载的速度差强人意。不过好在&#xff0c;我们可以进行远程仓库的设置&#xff0c;将仓库镜像地址设置为…

ChatGPT 背后包含了哪些技术?

ChatGPT 是由OpenAI开发的一款基于GPT-3&#xff08;Generative Pre-trained Transformer 3&#xff09;的人工智能语言模型。这个模型是使用多种编程语言和技术组合编写的。 首先&#xff0c;ChatGPT 使用了 Python 作为主要的编程语言。Python 是一种流行的高级编程语言&…

Prometheus集成consul[被监控对象开启basic认证]

1&#xff0c;被监控对象开启basic认证 具体操作这里不再详细细讲。 2&#xff0c;将被监控对象注册到consul 由于被监控对象开启了basic认证&#xff0c;注册到consul后显示&#xff1a;401 Unauthorized Output: Unauthorized&#xff0c;不能够正常健康检查。 3&#xff0c…

AI绘画-Stable Diffusion笔记

软件&#xff1a;Stable Diffusion 视频教程来自 https://www.bilibili.com/video/BV1As4y127HW/?spm_id_from333.337.search-card.all.click 提示词 提示词类别 内容型提示词 人物主题特征&#xff1a; 服饰穿搭&#xff1a;white dress 发型发色&#xff1a;blonde hair,l…

TensorFlow案例学习:对服装图像进行分类

前言 官方为我们提供了一个 对服装图像进行分类 的案例&#xff0c;方便我们快速学习 学习 预处理数据 案例中有下面这段代码 # 预处理数据&#xff0c;检查训练集中的第一个图像可以看到像素值处于0~255之间 plt.figure() # 创建图像窗口 plt.imshow(train_images[0]) # …

【基于STM32OpenCV的车载机器人的抓取控制软件设计】

这里写自定义目录标题 本科优秀毕业论文《基于STM32&OpenCV的车载机器人的抓取控制软件设计》摘要:Abstract:前 言1方案设计与论证2机器人硬件电路设计3机器人软件设计4系统主要功能测试5 结 论参考文献本科优秀毕业论文《基于STM32&OpenCV的车载机器人的抓取控制软件…

开发过程教学——交友小程序

交友小程序 1. 我的基本信息2. 我的人脉2.1 我的关注2.2 我的粉丝 3. 我的视频4. 我的相册 特别注意&#xff1a;由于小程序分包限制2M以内&#xff0c;所以要注意图片和视频的处理。 1. 我的基本信息 数据库表&#xff1a; 我的基本信息我的登录退出记录我的登录状态&#x…

云计算:常用微服务框架

目录 一、理论 1.Java微服务框架 2.Go微服务框架 3.Python微服务框架 4.Node.js微服务框架 5..Net微服务框架 一、理论 1.Java微服务框架 Spring Cloud&#xff1a;最早最成熟&#xff0c;Java开源微服务框架方案 SpringBoot&#xff1a;全新框架&#xff0c;设计目的是…

Godot 官方2D游戏笔记(1):导入动画资源和添加节点

文章目录 前言2D官方游戏案例资源下载项目配置添加角色节点模拟运行移动根节点 结束 Godot专栏地址 前言 Godot 官方给了我们2D游戏和3D游戏的案例&#xff0c;不过如果是独立开发者只用考虑2D游戏就可以了&#xff0c;因为2D游戏纯粹&#xff0c;我们只需要关注游戏的玩法即可…

蓝桥杯---第二讲---二分与前缀和

文章目录 前言Ⅰ. 数的范围0x00 算法思路0x00 代码书写 Ⅱ. 数的三次方根0x00 算法思路0x01代码书写 Ⅲ. 前缀和0x00 算法思路0x01 代码书写 Ⅳ. 子矩阵的和0x00 算法思路0x01 代码书写 Ⅴ. 机器人跳跃问题0x00 算法思路0x01 代码书写 Ⅵ. 四平方和0x00 算法思路0x01 代码书写 …

SpringCloud学习笔记-注册微服务到Eureka注册中心

目录 1.在该Module的pom文件中引入eureka依赖2.在该module的src/main/resources/application.yml配置文件3.启动对应的微服务4.查看微服务是否启动成功 假如我有一个微服务名字叫user-service,我需要把它注册到Eureka注册中心,则具体步骤如下: 1.在该Module的pom文件中引入eure…

Flink的处理函数——processFunction

目录 一、处理函数概述 二、Process函数分类——8个 &#xff08;1&#xff09;ProcessFunction &#xff08;2&#xff09;KeyedProcessFunction &#xff08;3&#xff09;ProcessWindowFunction &#xff08;4&#xff09;ProcessAllWindowFunction &#xff…

真香!Jenkins 主从模式解决问题So Easy~

01.Jenkins 能干什么 Jenkins 是一个开源软件项目&#xff0c;是基于 Java 开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件项目可以进行持续集成。 中文官网&#xff1a;https://jenkins.io/zh/ 0…

好消息:用 vue3+layui 共同铸造我们新的项目

前言&#xff1a; layui这个框架不知道多少人还在关注着&#xff0c;记得第一次接触它是在18年&#xff0c;后来随着vue&#xff0c;react的盛行&#xff0c;jquerylayui的模式受到了特别大的冲击&#xff0c;后来作者都放弃维护他的官方网站&#xff0c;转而在github/gitee上做…

SLAM从入门到精通(ROS和底盘Stm32的关系)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 学过Ros的同学&#xff0c;一般对subscribe、publish、话题、服务这些内容都比较熟悉。如果再熟悉一点的话&#xff0c;还会知道slam、move_base、…

NLP - 数据预处理 - 文本按句子进行切分

NLP - 数据预处理 - 文本按句子进行切分 文章目录 NLP - 数据预处理 - 文本按句子进行切分一、前言二、环境配置1、安装nltk库2、下载punkt分句器 三、运行程序四、额外补充 一、前言 在学习对数据训练的预处理的时候遇到了一个问题&#xff0c;就是如何将文本按句子切分&#…

LeetCode:买卖股票 系列 含冷冻期、含手续费(C++)

目录 309. 买卖股票的最佳时机含冷冻期 714. 买卖股票的最佳时机含手续费 买卖股票的最佳时机 Ⅰ、Ⅱ、Ⅲ、Ⅳ 的解析&#xff0c;在如下的上一篇博文中&#xff1a; LeetCode&#xff1a;买卖股票的最佳时机 系列Ⅰ、Ⅱ、Ⅲ、Ⅳ、含冷冻期&#xff08;C&#xff09;_Cosmos…

ChainForge:衡量Prompt性能和模型稳健性的GUI工具包

ChainForge是一个用于构建评估逻辑来衡量模型选择&#xff0c;提示模板和执行生成过程的GUI工具包。ChainForge可以安装在本地&#xff0c;也可以从chrome浏览器运行。 ChainForge可以通过聊天节点对多个对话可以使用不同的llm并行运行。可以对聊天消息进行模板化&#xff0c;并…