Vue非父子组件传值之事件总线(eventbus)的使用方式

最新推荐文章于 2024-09-22 18:04:02 发布
最新推荐文章于 2024-09-22 18:04:02 发布
阅读量111 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49154644/article/details/128373001
版权
本文介绍了如何在Vue的入口文件中挂载一个对象到Vue的原型上，以便于组件A和B之间的通信。组件A通过监听 `$bus` 对象上的 'updata' 事件来接收数据，而组件B则通过 `$bus` 发射 'updata' 事件传递数据。这种方法简化了Vue应用中不同组件间的事件传递。
摘要由CSDN通过智能技术生成

在入口函数main.js中 挂载一个对象到Vue原型上

Vue.prototype.bus = new Vue()

//在组件A中监听事件
this.$bus.$on('updata', (data) => {
	console.log(data)
})

//在组件B中发射事件
this.$bus.$emit('updata', data)
一板一眼
关注
【Vue3 第十六章】非父子组件间传值
前端知识分享喵
02-01 1324
非父子组件传参
vue -- 非父子组件传值，事件总线（eventbus）的使用方式
积少成多
11-30 6897
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 先说一下什么是事件总线，其实就是订阅发布者模式； 比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就是发布），我们通过on方法去监听某个事件，再用emit去触发这个事件，同时调用on中的回调函数，这样就完成了一次事件触发； 这是一种设计模式，和语言没有关系； 如果不太了...
vue 父子组件传值
qq_33240556的博客
04-22 466
在 Vue.js 中，父子组件间的通信主要通过 Props 和自定义事件（$emit）来进行。
vue 组件间的事件传值之（EventBus）
csl125的博客
03-29 2683
许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习，Vue组件数据通讯常常会有父子组件，兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。 父子组件通讯原则 为了提高组...
vue 事件总线（总线传值），eventBus的使用
PrimaryColor
08-24 1042
介绍： vue组件通信有很多，比如父子组件，兄弟组件通信，还有vuex。如果两个组件之间不存在父子，也不存在兄弟关系的时候，那要是想在一个组件里面点击了一个按钮，并触发另一个组件刷新数据的时候该怎么办？ 首先可以想到的是使用vuex，点击按钮的时候修改vuex里面的值，然后在另一个组件里面监听这个值，当发生变化的时候并刷新数据。 逻辑上是可以的，不过就是太麻烦了，今天给大家推荐一个新的组件传值方式，总线传值eventBus。 一、首先在main.js里面初始化一个事件总线实例。 其实就是重新构造一
VUE父子之间的传值（以vue3为例）
m0_60817005的博客
08-02 2934
【代码】VUE父子之间的传值（以vue3为例）
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
第二十二节:带你梳理Vue2:Vue非父子组件间的传参
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-11 1446
Bus/总线/发布订阅模式用于解决平级组件或者跨级组件之间的通信,因为如果全部用父子组件通信,有的不是父子组件就很繁琐, 所以我们利用一个公共的vue实例订阅和发布事件来达到不是父子组件间的通信
Vue 组件间通讯之非父子组件间通讯——事件总线（EventBus）
Jay的博客
05-12 898
在Vue中，父子组件的通讯有Vue提供的一套操作方法，常用的借助props、ref等来实现。那非父子组件间的通讯如何实现呢？一般的可以使用vuex来实现。但是，vuex一般处理的是全局的组件状态管理。而且，有些项目根本就没有用到vuex。为此，这里提供另一种组件通讯方式：Vue 事件总线—— EventBus。
Vue组件通信中非父子组件传值知识点总结
10-15
总结来说，理解非父子组件传值的关键在于掌握事件总线的使用。通过创建一个独立的Vue实例作为事件总线，组件可以触发和监听自定义事件，以此达到数据的传递。这种方法简单易用，但不适用于大型应用，因为随着组件...
vue非父子组件间的传值
01-08
这里我们将详细讨论如何使用事件总线实现非父子组件间的通信。 ### 1. 创建事件总线（Event Bus） 首先，我们需要创建一个全新的Vue实例作为事件总线，它将作为一个全局的中间件来处理组件之间的通信。在你的项目...
vue 组件间的通信之子组件向父组件传值的方式
11-20
对于一些简单场景或非父子组件间的通信，不使用 Vuex 的话，可以创建一个全局的 Vue 实例作为事件总线（Event Bus）。 ```javascript // eventBus.js import Vue from 'vue' export const EventBus = new Vue() ```...
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 553
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
学习Vue3骨架+异步组件(defineAsyncComponent)+Suspense
weixin_49352307的博客
09-19 402
template #defalut> 显示用户内容。<template #fallback> 显示骨架。利用Suspense插槽合理显示骨架与用户界面。
vue复制信息到粘贴框
程序员一枚，仅记录工作中的难点
09-21 355
main.js文件引入。
Vue配置路由
卡布达的博客
09-20 395
每个路由对象都应该包含path（路由路径）和component（对应的组件）routes: [path:'/',path:'',},{},{}]},{})
在 Windows 上运行 Vue 项目时解决 ‘NODE_OPTIONS‘ 错误
常备不懈
09-20 949
在 Windows 系统上启动 Vue 项目时，遭遇报错。具体报错信息如下： ``` ‘NODE_OPTIONS‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。 ``` 这个错误通常意味着 Windows 系统无法识别 `NODE_OPTIONS` 环境变量，从而导致项目无法正常启动。
vue无感刷新Token并重新请求
最新发布
Faaaaaaq的博客
09-22 484
vue 拦截器拦截401重新请求Token 无感刷新Token 之后重新请求报401的接口。
Vue2.0子组件同级通信：使用事件总线eventBus
"Vue2.0子同级组件之间数据交互方法主要依赖于事件总线(event bus)实现，通过创建一个新的Vue实例作为通信桥梁。在发送数据的组件中使用$emit触发自定义事件，接收数据的组件则通过$on监听相应事件。这种通信方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值