使用全局事件总线实现任意组件间的通讯

本文以vue2中爷孙组件通讯为例,需求是点击孙组件的按钮,实现关闭爷组件的弹窗。

全局事件总线是通过Vue实例的事件系统来实现组件之间的通讯,可以方便地在任何组件中进行事件的触发和监听。

以下是使用全局事件总线实现爷孙组件通讯的步骤:

  1. 创建一个新的Vue实例作为全局事件总线,可以将其定义在一个单独的文件中,例如event-bus.js
    // event-bus.jsimport Vue from 'vue';
    export const EventBus = new Vue();
    

2.在爷爷组件中使用EventBus.$on监听事件,并在事件处理函数中关闭对话框:

// Grandparent.vue<template><div><Dialog :visible="dialogVisible"></Dialog></div>
</template><script>
import { EventBus } from './event-bus.js';export default {data() {return {dialogVisible: false};},created() {EventBus.$on('closeDialog', () => {this.dialogVisible = false;});}
};
</script>

3. 在孙组件中使用EventBus.$emit()触发事件

// Grandchild.vue<template><div><button @click="closeDialog">Close Dialog</button></div>
</template><script>
import { EventBus } from './event-bus.js';export default {methods: {closeDialog() {EventBus.$emit('closeDialog');}}
};
</script>

 通过以上步骤,可以使用全局事件总线实现爷孙组件之间的通讯。当孙组件中的按钮被点击时,会触发closeDialog事件,爷爷组件会监听到该事件并关闭对话框。

兄弟组件之间也可以使用全局事件总线实现数据共享;

总结步骤:

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

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

相关文章

初阶数据结构:链表相关题目练习(补充)

目录 1. 单链表相关练习题1.1 移除链表元素1.2 反转链表1.3 链表的中间结点1.4 链表的倒数第k个结点1.5 合并两个有序链表1.6 链表分割1.7 链表的回文结构1.8 相交链表1.9 判断一个链表中是否有环1.10 寻找环状链表相遇点1.11 链表的深度拷贝 1. 单链表相关练习题 注&#xff1…

第一节:Sashulin Message Broker是什么?

一、Sashulin Message Broker简介 Sashulin Message Broker&#xff08;消息代理&#xff0c;简称SMB&#xff09;是一款可编程的消息流处理软件&#xff0c;它使应用程序、系统和服务能够相互通信并交换信息。通过消息传递和转换&#xff0c;实现不同平台和不同语言编写的服务…

登录页设计新选择:毛玻璃和新拟态风格,非2.5D和插画风

登录页给潜在用户传递了产品的品牌调性&#xff0c;是非常重要的一类页面&#xff0c;之前2.5D和插画风格的登录页流行一时&#xff0c;不过这阵风好像过去了&#xff0c;新的风格开始涌现了。 一、越来越流行的毛玻璃设计风格 毛玻璃风格是指将背景模糊处理&#xff0c;使得…

DOM 获取父子节点

DOM 是以树状结构排列的&#xff0c;所以父子关系是相对的&#xff0c;当li为我们的目标节点的时候&#xff0c;ul为其父节点&#xff0c;其他li为它的兄弟节点&#xff0c;li里面包含的标签为子节点&#xff0c;以此类推。 那我们如何找父节点&#xff1f; 元素.parentNode&am…

长江路一号桥的安全监测革新

位于无锡新区的长江路一号桥&#xff0c;自1997年落成以来&#xff0c;一直是多功能的市政要道。大桥北侧连接供气管道&#xff0c;右侧则是城市供水管道&#xff0c;而桥底则设有蓝藻环保监测点。这意味着一旦此桥出现问题&#xff0c;其影响远超交通堵塞的层面。近年来&#…

密码学及其应用(应用篇15)——0/1背包问题

1 问题背景 背包问题是一个经典的优化问题&#xff0c;在计算机科学和运筹学中有着广泛的应用。具体到你提到的这个问题&#xff0c;它是背包问题中的一个特例&#xff0c;通常被称为0/1背包问题。这里&#xff0c;我们有一系列的正整数 &#xff0c;以及一个正整数&#xff0c…

推荐一个 Obsidian 的 ChatGPT 插件

源码地址&#xff1a;https://github.com/nhaouari/obsidian-textgenerator-plugin Text Generator 是目前我使用过的最好的 Obsidian 中的 ChatGPT 功能插件。它旨在智能生成内容&#xff0c;以便轻松记笔记。它不仅可以在 Obsidian 中直接使用 ChatGPT&#xff0c;还提供了优…

《大模型时代-ChatGPT开启通用人工智能浪潮》精华摘抄

原书很长&#xff0c;有19.3w字&#xff0c;本文尝试浓缩一下其中的精华。 知识点 GPT相关 谷歌发布LaMDA、BERT和PaLM-E&#xff0c;PaLM 2 Facebook的母公司Meta推出LLaMA&#xff0c;并在博客上免费公开LLM&#xff1a;OPT-175B。 在GPT中&#xff0c;P代表经过预训练(…

Python入门到精通(九)——Python数据可视化

Python数据可视化 一、JSON数据格式 1、定义 2、python数据和JSON数据转换 二、pyecharts 三、折线图 四、地图 五、动态柱状图 一、JSON数据格式 1、定义 JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据JSON本质上是一个带有特定格式的字符…

数仓项目6.0(二)数仓

中间的几步意义就在于&#xff0c;缓存中间处理数据样式&#xff0c;避免重复计算浪费算力 分层 ODS&#xff08;Operate Data Store&#xff09; Spark计算过程中&#xff0c;存在shuffle的操作&#xff0c;而shuffle会将计算过程一分为二&#xff0c;前一阶段不执行完&…

mongo之常用数据库操作

目录 一、准备环境 二、日常记录及执行示范 连接数据库查询版本查询表总数模糊查询(使用正则)查询文档中数据条数排序大于等于查询有哪些库时间查询不在条件内的查询复制数据更新字段名称删除数据库 四、高阶查询 五、备份迁移数据库 总结 一、准备环境 借鉴&#xff1a;…

【机器学习】特征选择之包裹式特征选择法

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

C++基础知识(六:继承)

首先我们应该知道C的三大特性就是封装、继承和多态。 此篇文章将详细的讲解继承的作用和使用方法。 继承 一个类&#xff0c;继承另一个已有的类&#xff0c;创建的过程 父类(基类)派生出子类(派生类)的过程 继承提高了代码的复用性 【1】继承的格式 class 类名:父类名 {}; 【…

分割回文串 复原IP地址 子集

131.分割回文串 力扣题目链接(opens new window) 给定一个字符串 s&#xff0c;将 s 分割成一些子串&#xff0c;使每个子串都是回文串。 返回 s 所有可能的分割方案。 示例: 输入: "aab" 输出: [ ["aa","b"], ["a","a"…

消息队列RabbitMQ

消息队列 一、起源二、原理预取值死信队列死信 延迟队列应用场景 三、用法 一、起源 消息队列简称MQ(Message Queue)。 假设有一个简单的订单处理系统&#xff0c;涉及三个业务&#xff1a;订单提交、库存更新和支付处理。 如果没有消息队列&#xff0c;订单处理系统可能会按…

nginx(三)实现反向代理客户端 IP透传

正常情况下&#xff0c;客户端去访问代理服务器&#xff0c;然后代理服务器再取访问真实服务器&#xff0c;在真实服务器上&#xff0c;只能显示代理服务器的ip地址&#xff0c;而不显示客户端的ip地址&#xff0c;如果想让客户端的ip地址也能在真实服务端看见&#xff0c;这一…

matlab实现不同窗滤波器示例

1 汉明窗低通滤波器 &#xff1a; 在Matlab中使用汉明窗设计低通滤波器可以通过fir1函数实现。汉明窗通常用于设计滤波器&#xff0c;可以提供更突出的频率特性。 下面是一个示例代码&#xff0c;演示如何在Matlab中使用汉明窗设计低通滤波器&#xff1a; % 定义滤波器参数 fs …

景联文科技:引领战场数据标注服务,赋能态势感知升级

自21世纪初&#xff0c;信息化战争使战场环境变得更为复杂和难以预测&#xff0c;持续涌入的海量、多样化、多来源和高维度数据&#xff0c;加大了指挥员的认知负担&#xff0c;使其需要具备更强的数据处理能力。 同时&#xff0c;计算机技术和人工智能技术的飞速发展&#xff…

机试指南:Ch5:线性数据结构 Ch6:递归与分治

文章目录 第5章 线性数据结构1.向量 vector2.队列 queue(1)队列的特点、应用(2)基本操作(3)例题例题1&#xff1a;约瑟夫问题2 &#xff08;难度&#xff1a;中等&#xff09; (4)习题习题1&#xff1a;排队打饭 &#xff08;难度&#xff1a;中等&#xff09; 3.栈 stack(1)栈…

进程的通信以及信号的学习

一&#xff0c;进程的通信&#xff1a; 种类&#xff1a;1.管道 2.信号 3.消息队列 4.共享内存 5.信号灯 6.套接字 1.管道: 1.无名管道 无名管道只能用于具有亲缘关系的进程间通信 pipe int pipe(int pipefd[2]); 功能: 创建一个无名管道 …