069:vue中EventBus的使用方法(图文示例)

在这里插入图片描述

第069个

查看专栏目录: VUE ------ element UI


本文章目录

    • 示例背景
    • 示例效果图
    • 示例源代码
      • 父组件:
      • 子组件A:
      • 子组件B:
      • eventbus/index.js:
    • EventBus的基本使用方法:

示例背景

在Vue中,使用EventBus可以实现组件间的通信,如何使用EventBus? 都需要做哪些配置呢?他的注意事项是什么呢?请参考以下示例及使用步骤。

示例效果图

在这里插入图片描述

示例源代码

父组件:

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-03
*/<template><div class="djs-box"><div class="topBox"><h3>vue使用EventBus的图文示例 </h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi"><div class="item"><ComA></ComA></div><div class="item"><ComB></ComB></div></div></div>
</template><script>import ComA from '../components/eventbus/demo-A.vue';import ComB from '../components/eventbus/demo-B.vue'export default {data() {return {}},components:{ComA,ComB},}
</script>
<style scoped>.djs-box {width: 1000px;height: 650px;margin: 50px auto;border: 1px solid peru;}.topBox {margin: 0 auto 0px;padding: 10px 0 20px;background: peru;color: #fff;}.dajianshi {width: 98%;height: 480px;margin: 5px auto 0;display: flex;justify-content: space-between;}.item{width: 48%;height: 480px;margin-top: 20px;text-align: center;border: 1px solid #583;		}
</style>

子组件A:

<template><div><h2> 组件A</h2><el-button @click="sendMessage">发送消息给B</el-button><h4>B获取的消息:</h4><div style="color: blue;">{{message}}</div></div>
</template><script>import {EventBus} from '@/eventbus/index.js';export default {data() {return {message: ''};},mounted() {EventBus.$on('messageB', (msg) => {this.message = msg;});},methods: {sendMessage() {EventBus.$emit('messageA', 'Hello from Component A');}}}
</script>

子组件B:

<template><div><h2> 组件B</h2><el-button @click="sendMessage">发送消息给A</el-button><h4>A获取的消息:</h4><div style="color: red;">{{ message }}</div></div>
</template><script>import {EventBus} from '@/eventbus/index.js';export default {data() {return {message: ''};},mounted() {EventBus.$on('messageA', (msg) => {this.message = msg;});},methods: {sendMessage() {EventBus.$emit('messageB', 'Hello from Component B');}}}
</script>

eventbus/index.js:

import Vue from ‘vue’;
export const EventBus = new Vue();

EventBus的基本使用方法:

  • List item初始化EventBus:首先需要创建一个EventBus实例。可以通过创建一个新的.js文件(如event-bus.js),然后导入Vue并实例化一个新的Vue对象来创建EventBus。或者,可以直接在项目的main.js文件中初始化EventBus。
  • 发送事件:要向EventBus发送事件,可以使用 e m i t 方 法 。 例 如 , t h i s . emit方法。例如,this. emitthis.EventBus.$emit(‘eventName’, payload),其中eventName是事件名,payload是要传递的参数。
  • 监听事件:要在组件中监听EventBus上的事件,可以使用 o n 方 法 。 例 如 , t h i s . on方法。例如,this. onthis.EventBus.$on(‘eventName’, callback),其中eventName是事件名,callback是处理事件的函数。
  • 移除监听:如果需要在组件销毁时移除事件监听,可以使用 o f f 方 法 。 例 如 , t h i s . off方法。例如,this. offthis.EventBus.$off(‘eventName’, callback)。
  • 注意事项:虽然EventBus提供了一种简单的方式来实现组件间通信,但过度使用可能会导致代码难以维护。因此,对于更复杂的应用,建议使用Vuex作为状态管理解决方案。

总的来说,通过以上步骤,可以在Vue项目中使用EventBus来实现不同组件之间的通信。

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

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

相关文章

Python||五城P.M.2.5数据分析与可视化_使用华夫图分析各个城市的情况(上)

目录 五城P.M.2.5数据分析与可视化——北京市、上海市、广州市、沈阳市、成都市&#xff0c;使用华夫图分析各个城市的情况 1.北京市的空气质量 2.广州市的空气质量 【上海市和成都市空气质量情况详见下期】 五城P.M.2.5数据分析与可视化——北京市、上海市、广州市、沈阳市、成…

红日三打靶!!!

红日三&#xff0c;黑盒测试 环境搭建一.外网打点1.网段探测2.端口服务扫描3.目录扫描4.网站漏洞扫描5.汇总&#xff0c;找破绽6.登陆MySQL改密码 7.进入后台&#xff0c;找能写马的地方8.蚁剑连接9.disable_functions绕过1.蚁剑插件绕过2.bypass_disablefunc_via_LD_PRELOAD绕…

深兰科技陈海波出席CTDC2024第五届首席技术官领袖峰会:“民主化AI”的到来势如破竹

1月26日&#xff0c;CTDC 2024 第五届首席技术官领袖峰会暨出海创新峰会在上海举行。深兰科技创始人、董事长陈海波受邀出席了本届会议&#xff0c;并作为首个演讲嘉宾做了题为“前AGI时代的生产力革命范式”的行业分享。 作为国内顶级前瞻性技术峰会&#xff0c;CTDC首席技术官…

【数据结构 06】二叉树

一、原理 二叉树算法核心思维&#xff1a;递归 满二叉树&#xff1a;二叉树的层数为K&#xff0c;节点数为 完全二叉树&#xff1a;二叉树的层数为K&#xff0c;前K-1层是满的&#xff0c;第K层是连续的 满二叉树是完全二叉树的子集。 任意二叉树&#xff1a;若叶子节点的…

2024-01-07-AI 大模型全栈工程师 - 做自己的产品经理

摘要 2024-01-07 周日 杭州 阴 本节内容: a. 如何做好独立开发设计&#xff0c;实现财富自由&#xff1b; 课程内容 1. 独立开发者 英文 indie hacker&#xff0c;是指独立开发软件产品的人&#xff1b;一人承担一个项目产品的所有工作&#xff1b; 2. 创业机会 云计算设…

学习使用Flask模拟接口进行测试

前言 学习使用一个新工具&#xff0c;首先找一段代码学习一下&#xff0c;基本掌握用法&#xff0c;然后再考虑每一部分是做什么的 Flask的初始化 app Flask(__name__)&#xff1a;初始化&#xff0c;创建一个该类的实例&#xff0c;第一个参数是应用模块或者包的名称 app…

Java宝典-数据类型

目录 1.变量与常量2.Java中的数据类型3.整型3.1 字节型byte3.2 短整型short3.3 整型int3.4 长整型long 4.浮点型4.1 单精度浮点型float4.2 双精度浮点型double 5.字符型6.布尔型7.类型转换7.1 隐式类型转换7.2 显示类型转换(强制类型转换) 8.类型提升 大家好,我是你们的Vampire…

华为数通方向HCIP-DataCom H12-821题库(单选题:401-420)

第401题 R1的配置如图所示,此时在R1查看FIB表时,关于目的网段192.168.1.0/24的下跳是以下哪一项? A、10.0.23.3 B、10.0.12.2 C、10.0.23.2 D、10.0.12.1 【答案】A 【答案解析】 该题目考查的是路由的递归查询和 RIB 以及 FIB 的关系。在 RIB 中,静态路由写的是什么,下…

PPT录屏功能在哪?一键快速找到它!

在现代办公环境中&#xff0c;ppt的录屏功能日益受到关注&#xff0c;它不仅能帮助我们记录演示文稿的播放过程&#xff0c;还能将操作过程、游戏等内容完美录制下来。可是很多人不知道ppt录屏功能在哪&#xff0c;本文将为您介绍ppt录屏的打开方法&#xff0c;以帮助读者更好地…

网络原理TCP/IP(2)

文章目录 TCP协议确认应答超时重传连接管理断开连接 TCP协议 TCP全称为"传输控制协议(Transmission Control Protocol").⼈如其名,要对数据的传输进⾏⼀个详细 的控制; TCP协议段格式 • 源/目的端口号:表⽰数据是从哪个进程来,到哪个进程去; • 32位序号/32位确认…

spring问题点

1.事务 1.1.事务传播 同一个类中 事务A调非事务B B抛异常 AB事务生效&#xff08;具有传播性&#xff09; 同一个类中 事务A调非事务B A抛异常 AB事务生效 也就是主方法加了事务注解 则方法内调用的其他本类方法无需加事务注解&#xff0c; 发生异常时可以保证事务的回滚 最常…

day07-CSS高级

01-定位 作用&#xff1a;灵活的改变盒子在网页中的位置 实现&#xff1a; 1.定位模式&#xff1a;position 2.边偏移&#xff1a;设置盒子的位置 left right top bottom 相对定位 position: relative 特点&#xff1a; 不脱标&#xff0c;占用自己原来位置 显示模…

跟着cherno手搓游戏引擎【14】封装opengl

本节先把代码粘上&#xff0c;后续会慢慢把注释都给加上&#xff0c;先看代码了解个大概&#xff08;待更新&#xff09; 前置&#xff1a; RendererAPI.h: #pragma once namespace YOTO {enum class RendererAPI {None 0,OpenGL1};class Renderer {public:inline static R…

(每日持续更新)jdk api之NotSerializableException基础、应用、实战

博主18年的互联网软件开发经验&#xff0c;从一名程序员小白逐步成为了一名架构师&#xff0c;我想通过平台将经验分享给大家&#xff0c;因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验&#xff0c;晚上进行用心精简、整理、总结、定稿&…

Flink 流式读取 Debezium CDC 数据写入 Hudi 表无法处理 -D / Delete 消息

问题场景是&#xff1a;使用 Kafka Connect 的 Debezium MySQL Source Connector 将 MySQL 的 CDC 数据 &#xff08;Avro 格式&#xff09;接入到 Kafka 之后&#xff0c;通过 Flink 读取并解析这些 CDC 数据&#xff0c;然后以流式方式写入到 Hudi 表中&#xff0c;测试中发现…

【爬虫专区】批量下载PDF (无反爬)

天命&#xff1a;只要没反爬&#xff0c;一切都简单 这次爬取的是绿盟的威胁情报的PDF 先看一下结构&#xff0c;很明显就是一个for循环渲染 burp抓包会发现第二次接口请求 接口请求一次就能获取到了所有的数据 然后一个循环批量下载数据即可&#xff0c;其实没啥难度的 imp…

如何安装MySQL

如何安装MySQL 前提条件下载MySQL在 Windows 上安装 MySQL验证 MySQL 安装 MySQL是当今工业界广泛使用的最流行的关系数据库管理软件之一。它通过各种存储引擎提供多用户访问支持。它得到了甲骨文公司的支持。在本节中&#xff0c;我们将学习如何为初学者下载和安装 MySQL。 前…

安卓相对布局RelativeLayout

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"150dp"><TextViewandroid…

在VM虚拟机搭建NFS服务器

NFS共享要求如下&#xff1a; &#xff08;1&#xff09;共享“/mnt/自已姓名的完整汉语拼音”目录&#xff0c;允许XXX网段的计算机访问该共享目录&#xff0c;可进行读写操作。&#xff08;说明&#xff1a;XXX网段&#xff0c;请根据你的规划&#xff0c;再具体指定&#xf…

完整的 HTTP 请求所经历的步骤及分布式事务解决方案

1. 对分布式事务的了解 分布式事务是企业集成中的一个技术难点&#xff0c;也是每一个分布式系统架构中都会涉及到的一个东西&#xff0c; 特别是在微服务架构中&#xff0c;几乎可以说是无法避免。 首先要搞清楚&#xff1a;ACID、CAP、BASE理论。 ACID 指数据库事务正确执行…