vue使用EventBus进行跨组件通信

Vue中的EventBus,又称为事件总线,是一种常用的通信模式,它允许在Vue应用程序的不同组件之间进行松耦合的通信,尤其是对于那些没有直接父子关系的组件间的通信非常有用。EventBus基于Vue的自定义事件系统实现,工作原理遵循发布-订阅模式。

如何使用EventBus:

  1. 初始化EventBus
    首先,你需要创建一个EventBus实例。这通常在一个单独的文件中完成,然后在需要使用EventBus的组件中导入这个实例。

    // eventBus.js
    import Vue from 'vue';
    export const EventBus = new Vue();
    
  2. 发布事件(发送消息)
    在一个组件中,你可以使用EventBus.$emit方法来触发一个事件,并传递数据。

    // 组件A
    import { EventBus } from './eventBus.js';
    EventBus.$emit('eventName', eventData);
    
  3. 订阅事件(接收消息)
    在另一个组件中,使用EventBus.$on方法来监听这个事件,并定义当事件触发时应执行的回调函数。

    // 组件B
    import { EventBus } from './eventBus.js';
    created() {EventBus.$on('eventName', this.handleEventData);
    },
    methods: {handleEventData(eventData) {console.log('Received data:', eventData);}
    },
    beforeDestroy() {// 清理事件监听,防止内存泄漏EventBus.$off('eventName', this.handleEventData);
    }
    

注意点:

  • 避免滥用:虽然EventBus提供了便捷的跨组件通信方式,但过度使用可能导致代码结构混乱,难以维护。对于复杂的通信逻辑,考虑使用 Vuex 状态管理器。
  • 内存泄漏:记得在组件销毁时移除不必要的事件监听器,以防止内存泄漏。可以使用beforeDestroydestroyed生命周期钩子来做这件事。
  • 命名规范:为事件命名时,应保持清晰且具有描述性,以避免事件名冲突和混淆。

EventBus提供了一种简单的方式来解耦组件间通信,适用于小型到中型项目,或者是在不希望引入 Vuex 等重型状态管理方案时的临时解决方案。

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

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

相关文章

商品指数创年内新高,粘性通胀成为美联储噩梦

文章概述 虽然美国4月CPI增幅放缓让美联储今年降息的可能性大增,但与此同时,大宗商品价格却达到了一年来的最高水平,粘性通胀可能成为美联储的噩梦。数据显示,跟踪24种能源、金属和农业合约彭博大宗商品现货指数今年以来已经上涨…

【ARM 嵌入式 C 入门及渐进 6.3 -- C 函数嵌入多条汇编语句 】

请阅读【嵌入式开发学习必备专栏】 文章目录 C 函数嵌入多条汇编语句C 函数嵌入多条汇编语句 在C代码中嵌入多条ARMv8汇编语句,可以通过将这些汇编指令放置在一个asm块内来实现。使用GCC的内嵌汇编语法,你可以顺序地编写多个指令,并根据需要指定输入、输出和被破坏(clobbe…

【APM】在Kubernetes中,使用Helm安装Prometheus Server 0.73.2(开启远程写入功能)

1、Prometheus 简介 Prometheus 是一款开源的监控和警报系统,起源于 SoundCloud 并在2012年开始被广泛采用。它在2016年成为 Cloud Native Computing Foundation (CNCF) 的成员项目,与 Kubernetes 齐名,是云原生计算领域的重要组成部分。Prometheus 以其强大的灵活性、易用…

训练的过程中内存一直增加的问题

可能的原因一: 解决pytorch训练的过程中内存一直增加的问题_pytorch训练过程中,内存一直增长-CSDN博客 可能的原因二: DataLoader num_workers > 0 causes CPU memory from parent process to be replicated in all worker processes Issue #13246…

DAY2 NETWORK

① 什么是IP地址 IP地址:是计算机在网络中唯一的标识,由两部分组成 分别是表示网络区域的网络号,和该网络下的主机编号 网络号:确定计算机所从属于哪个局域网络 主机号:计算机在该局域网络下的一个编号 ② IP的划分…

使用Flask ORM进行数据库操作的技术指南

文章目录 安装Flask SQLAlchemy配置数据库连接创建模型类数据库操作插入数据查询数据更新数据删除数据 总结 Flask是一个轻量级的Python Web框架,其灵活性和易用性使其成为开发人员喜爱的选择。而ORM(对象关系映射)则是一种将数据库中的表与面…

LeetCode题练习与总结:二叉树的最大深度--104

一、题目描述 给定一个二叉树 root ,返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1: 输入:root [3,9,20,null,null,15,7] 输出:3示例 2: 输入:root […

ESP32开发环境搭建Windows VSCode集成Espressif IDF插件开发环境搭建 IDF_V5.2.1

一、安装Visual Studio Code 下载地址:Download Visual Studio Code - Mac, Linux, Windows 打开上方链接,选择页面中的Windows版本,单击下载 将下载好的VSCodeUserSetup-x64-1.89.1.exe。单击右键,选择以管理员身份运行&#xf…

雪花算法 代码

/*** author lwh* date 2023/9/5* description 批量插入,手动设置**/ public class IdWorker {//因为二进制里第一个 bit 为如果是 1,那么都是负数,但是我们生成的 id 都是正数,所以第一个 bit 统一都是 0。//机器ID 2进制5位 3…

jenkins自动化部署详解

一、准备相关软件 整个自动化部署的过程就是从git仓库拉取最新代码,然后使用maven进行构建代码,构建包构建好了之后,通过ssh发送到发布服务的linux服务器的目录,最后在此服务器上执行相关的linux命令进行发布。 此篇文章jenkins…

gsap笔记

1.gsap基础 gsap.to() //从初始位置到设定位置 gsap.from() //从设定位置到初始位置 gsap.from("h1",{stagger:1 //设定末状态repeate:2 //重复次数yoyo: true //来回动画scale:1 //缩放倍数 }) //stagger:相同元素的按序播放…

【iOS安全】BurpSuite iOS https抓包 | DNS Spoofing

BurpSuite 完整版安装 参考:Admin Team 小数智 的博客 下载 Burp Suite 2021.6 官网下载地址 https://portswigger.net/burp/releases (下载并安装好) jdk 使用的是11.0.10 https://www.oracle.com/java/technologies/javase-jdk11-downl…

实用css整理

网页一键变灰 body{filter: grayscale(1); } 一般用于特殊时期,网页变灰,只需要给body标签添加这行样式代码。 一键换主题色 body {filter: hue-rotate(45deg);} 给body标签设置这个属性样式,改变角度看看效果吧。 设置字母大小写 p {t…

麦克纳母轮(全向)移动机器人集群控制的Simulink/Simscape虚拟仿真平台搭建

麦克纳姆轮是一种常见的全向移动机构,可以使机器人在平面内任意方向平移,同时可以利用差速轮车的属性实现自转,能够在狭窄且复杂多变的环境中自由运行,因而被广泛应用于竞赛机器人和特殊工业机器人场景。 Ps:最新的BYD仰望U8也有一…

项目启动失败,【consul】

如题,启动时项目未能正常启动,但上次都一切正常,日志提示: Consul service ids must not be empty, must start with a letter 经过排查是因为consul的consulconfigservice服务假死,导致无法正常获取到配置文件&am…

【全开源】Java无人共享棋牌室茶室台球室系统JAVA版本支持微信小程序+微信公众号

开启智能共享新时代 一、系统源码概述:引领自助服务潮流 随着科技的不断发展和人们生活节奏的加快,自助服务已逐渐成为人们生活中的一部分。为了满足市场对无人共享棋牌室、茶室、台球室的需求,我们推出了全新的无人共享系统源码。这套源码…

使用决策树对金融贷款数据进行分析

使用决策树对金融贷款数据进行分析 在本篇博客中,我们将通过使用 Python、Pandas 和多种机器学习技术,对一组贷款数据进行全面分析。通过详细的步骤展示,你将学会如何进行数据预处理、可视化分析以及构建预测模型。 第一步:导入…

Sping源码(七)—ConfigurationClassPostProcessor —— 后续处理

序言 前面的文章中介绍了 parser.parse(); 方法的整体处理逻辑, 其中包括Bean、Import、Configuration、CompopnentScan、Component等注解的解析。 来看看注解解析完的后续工作都做了些什么? 源码片段 简单回顾一下主方法processConfigBeanDefinition…

如何在Python爬蟲中設置代理伺服器?

在實際應用中,爬蟲可能會遇到各種限制,如IP封鎖、訪問限制等。通過使用代理伺服器,可以有效地繞過這些限制,提升爬蟲的效率和隱私保護。本文將詳細介紹如何在Python爬蟲中設置代理伺服器,包括使用requests、urllib、Sc…

Windows10安装Docker Desktop - WSL update failed

按照提示更新wsl后,仍然会报错,github上没有找到解决方法。版本28、29、30都会报这个错。 经过尝试,将docker内的设置中,采用wsl禁掉即可。如下图: