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

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

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

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

  1. 创建一个新的Vue实例作为全局事件总线,可以将其定义在一个单独的文件中,例如event-bus.js
    // event-bus.js
    
    import 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.mfbz.cn/a/417836.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

33. 【Linux教程】Linux 用户组

前面小节介绍了 Linux 用户相关的增删改查&#xff0c;本小节介绍 Linux 用户组&#xff0c;Linux 系统中采取了一种安全机制&#xff08;即用户组&#xff09;&#xff0c;用户组可以允许多个 Linux 用户共享同一种权限。 1. 用户组介绍 Linux 是多任务多用户的操作系统&…

Vite 构建的 Vue3 项目如何整合 Monaco Editor 代码编辑器

目录 &#x1f981; 一. 前言&#x1f981; 二. 探索过程2.1 安装2.2 配置 Monaco Editor2.3 编写 Monaco Editor 代码编辑器2.3.1 创建 Coding Editor 组件2.3.2 父组件使用 CodingEditor 组件 2.4 效果展示 三. 总结 &#x1f981; 一. 前言 各位好&#xff01;我是&#x1…

什么是智能运维产品线和服务线

智能运维产品线和服务线涵盖了一系列自动化和智能化的技术和服务&#xff0c;旨在提升IT运维的效率和有效性。智能运维&#xff08;AIOps&#xff09;利用大数据、分析技术和机器学习能力来自动执行和简化运营工作流程&#xff0c;包括收集和汇总多源IT基础架构组件的数据、应用…

1、docker 基础命令

1、docker 运行镜像 docker run image tag 2、创建dockerfile&#xff08;构建容器的相关命令&#xff09; vim DockerFile 3、docker 构建容器镜像 docker build -t <image_name> . 4、docker 分层 5、查看镜像 docker images 6、docker 执行 docker run --name &…

【重要公告】BSV区块链协会全新推出“网络访问规则NAR”

​​发表时间&#xff1a;2024年2月15日 BSV区块链协会正式宣布已为BSV区块链推出一套全新的网络访问规则&#xff08;Network Access Rules&#xff0c;以下简称“NAR”&#xff09;。 NAR是一整套规则&#xff0c;用于规范BSV协会与BSV网络节点之间的关系。它基于比特币最初…

2024年怎么选类目?最容易起店的类目推荐,细分类目蕴含机会

大家好&#xff0c;我是电商花花。 做抖音小店选什么类目一直都是我们新手做店的一个大难题。 类目选对了&#xff0c;对于我们店铺就很容易出单&#xff0c;起店&#xff0c;如果选错了&#xff0c;店铺不出单或者没流量也是一个常见的事情。 而选品选类目本身就没有什么捷…

SikuliX使用介绍

1.SikuliX基本介绍 Sikuli 是 2009 年由 Tsung-Hsiang Chang 和 Tom Yeh在麻省理工学院用户界面设计小组的一个开源研究项目。1 年&#xff0c;两人都离开了 Sikuli-X-0.3rc2012 的项目&#xff0c;RaiMan决定接管开发和支持&#xff0c;并将其命名为 SikuliX。 S…

Pyhton的组合数据类型

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 生命对某些人来说是美丽的&#xff0c…

【MATLAB】MVMD_ MFE_SVM_LSTM 神经网络时序预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 MVMD_MFE_SVM_LSTM神经网络时序预测算法结合了多变量多尺度分解&#xff08;MVMD&#xff09;、多尺度特征提取&#xff08;MFE&#xff09;、支持向量机&#xff08;SVM&#xff09;和长…

Redis 在 Linux 系统下安装部署的两种方式详细说明

小伙伴们好&#xff0c;欢迎关注&#xff0c;一起学习&#xff0c;无限进步 Redis安装和配置 1、首先在官网下载好redis-6.0.9.tar.gzhttp://redis.io/ 或者使用 wget 命令下载&#xff1a;wget http://download.redis.io/releases/redis-6.0.9.tar.gz 2、下载使用上传到阿里…

计算机组成原理1

文章目录 计算机组成原理图要学的内容 总的来说学习计算机组成原理是学什么?计算机的基本硬件组成CPU内存主板其他部件 冯诺依曼体系结构(Von Neumann architecture)不可编程存储计算机具体 大家好我是jiantaoyab,这是我作为学习的笔记,在这里分享给大家,还有一些书籍<深入…

docker安装es与kibana

docker安装es与kibana docker pull elasticsearch:7.11.2 docker network create esnet docker run --name es2 -p 9200:9200 -p 9300:9300 --network esnet -e "discovery.typesingle-node" -d elasticsearch:7.11.2 docker run -d -p 5601:5601 --network e…

力扣hot100题解(python版22-28题)

22、相交链表 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交**&#xff1a;** 题目数据 保证 整个链式结构中不存在环。 注意&#xff…

Python的报错类型

在编写python代码时&#xff0c;当不当使用时&#xff0c;python会给出错误提示&#xff0c;常见的错误类型有如下几种&#xff1a; 1.TpyeError类型错误 ① 传入的参数数量不对&#xff1a;如调abs()有且仅有1个参数&#xff0c;但给出了两个时&#xff0c;python会给出提示…

14:00进去,14:08就出来了,问的问题太变态。。。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 刚从小厂出来&#xff0c;没想到在另一家公司我又寄了。 在这家…

【FPS游戏制作】Unity加入角色控制器控制人物的移动

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

解决gogs勾选“使用选定的文件和模板初始化仓库”报错500,gogs邮件发送失败,gogs邮件配置不生效,gogs自定义模板等问题

解决gogs勾选“使用选定的文件和模板初始化仓库”报错500,gogs邮件发送失败,gogs邮件配置不生效,gogs自定义模板等问题 前几天出了教程本地部署gogs&#xff0c;在后期运行时发现两个问题&#xff1a; 第一&#xff1a;邮件明明配置了&#xff0c;后台显示未配置&#xff0c;…

离线安装腾讯x5内核(附安装包下载地址)

背景&#xff1a;由于项目需要在一个定制android设备上播放RTSP流视频&#xff0c;设备自带的浏览器内核不支持RTSP流播放&#xff0c;这就导致我使用webview播放h5网址上的视频的时候&#xff0c;无法正常播放视频。在android手机上都是可以播放的&#xff0c;所以猜测是定制a…

ROS 2基础概念#1:计算图(Compute Graph)| ROS 2学习笔记

在ROS中&#xff0c;计算图&#xff08;ROS Compute Graph&#xff09;是一个核心概念&#xff0c;它描述了ROS节点之间的数据流动和通信方式。它不仅仅是一个通信网络&#xff0c;它也反映了ROS设计哲学的核心——灵活性、模块化和可重用性。通过细致探讨计算图的高级特性和实…

MySQL 逗号分隔查询--find_in_set()函数

业务场景&#xff1a; 在使用MySQL的时候&#xff0c;可能的某个字段存储的是一个英文逗号分割的字符串&#xff08;这里我们不讨论表设计的合理性&#xff09;&#xff0c;如图所示&#xff1a; 我们在查询的时候需要匹配逗号分割中的某个字符串&#xff0c;该怎么查询呢&am…