vue2.0+中eventBus实现兄弟组件通信

最新推荐文章于 2025-03-26 14:10:49 发布
最新推荐文章于 2025-03-26 14:10:49 发布
阅读量1.2k 收藏
点赞数
分类专栏： # vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chern1992/article/details/79994645
版权
在Vue2.0中，由于废弃了vm.dispatch和vm.broadcast，文章介绍了如何通过EventBus解决兄弟组件之间的通信问题。通过创建一个独立的Vue实例作为事件总线，分别在需要通信的组件中引入并监听或触发事件，从而实现实时的数据传递。示例中展示了在click组件中触发事件，并在show组件中监听并接收事件传递的数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在实现业务的时候，出现一个奇怪的Tree需求:

a.vue中包含list.vue和update.vue两个组件，list.vue中包含公用tree组件。需要做到的功能是update保存成功的时候重新获取list.vue的数据。但是为了降低公用组件的耦合度，又不能使用vuex.

在vue1.0中，这样的通信可以通过vm. dispatch

最低0.47元/天 解锁文章
「VUE架构」Vue2.0 EventBus父子组件通信（传参）
拥抱AI Design
07-17 1240
本文主要介绍Vue2.0之EventBus父子组件通信（传参），有别于之前的父子组件的传参都有着异曲同工之妙。 一、初始化 首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。 新创建一个 .js 文件，比如 eventBus.js 。文件目录建议放在根目录>>src>>assets>>js>> eventBus.js imp......
vue2.0_子父组件通信与兄弟组件通信的使用
QiuRenBB的博客
03-07 689
vuex的基本内容vue子父组件通信的学习一、什么是子父组件通信？二、为什么要使用子父组件通信？三、子父组件通信  1、子组件向父组件传递数据（this.$emit）  2、子组件向父组件传递数据（this.$refs）  3、父组件向子组件传递数据  4、父组件向子组件传递方法兄弟组件通信的学习一、子组件与子组件的通信方式（这边我直接以一个简单的在线聊天室为例子）  1、通过让父组件充当两个子组件之间的中间件（中继）。  2、通过使用EventBus（事件总线），它允许两个子组件之间直接通讯，而不需要涉及
vue3.0中使用bus总线和vue2.0中使用bus总线
weixin_43267086的博客
07-20 782
Vue3.0集成Bus Vue到3.0之后的Bus的方式变成了使用mitt。2.0是通过创建一个空的Vue来作为总线 Vue3.0中使用emit来注册 bus.emit(‘事件’,参数) Vue3.0中使用on来监听，bus.on(‘taskLrowClick’, (e)=>{ console.log(e)；其他的逻辑操作 }) emit和on是成对出现的，一个发起，一个接收，并且接收方可以是多个组件，只要第一个参数匹配，都可以接收到 3.0，，2.0 3.0，，2.0 3.0，，...
eventBus实现兄弟组件通信
zenkle的博客
10-06 449
1、新建一个bus.js并写入 import Vue from 'Vue' export default new Vue 2、在需要传递信息的子组件中分别引入bus.js import Bus from "bus.js路径"; 3、通过Bus.$emit向外触发事件（一般click事件向外触发） Bus.$emit('事件名'，message) 通过Bus.$on监听...
Vue2 组件通信终极指南：深入理解 EventBus、Vuex 和 Provide/Inject
最新发布
mmc123125的博客
03-26 912
不同的场景需要不同的通信方式，合理选择能提升代码的。接下来，我们结合实际场景，对不同方式进行详细讲解。无法满足需求（如兄弟组件通信），可以使用。依赖 Vue2 API，在 Vue3 被。，详细讲解每种方法的优缺点和最佳使用场景。适用范围较小，仅适合透传数据的情况。不能跨组件，嵌套过深时会导致。兄弟组件通信，无需父组件中转。不同的通信方式适用于不同场景，在 Vue2 组件开发中，直接的父子通信，简单直观。需手动管理事件，可能导致。组件封装，避免手动定义。层级太深时，可以使用。，但不想手动定义每个。
vue组件通信-EventBus
weixin_49405038的博客
04-20 326
vue组件通信-EventBus常用于跨组件通信时使用 两个组件的关系非常的复杂，通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线（event-bus) // 1. 创建事件总线 main.js const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus // 2. 订阅事件 - 接收值 this.$bus.$on('事件名', 事件回调函数) t
vue使用bus进行组件通信
qq_45186619的博客
04-28 635
EventBus事件总线 简单使用 全局注册 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.prototype.$EventBus = new Vue() new Vue({ router, store, render: h => h(App) }).$mount('#app') 组件A created (
vue兄弟组件之间通信--eventBus
weixin_33804582的博客
06-14 336
eventBus eventBus单独的事件中心,用来管理组件之间的通信。 由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。然后在组件中，可以使用$emit, $on, $off 分别来分发、监听、取消监听事件。 一. 创建eventBus 其实就是创建一个js文件,默认导出一个vue实例 import vue from 'vue'; e...
vue2.0s中eventBus实现兄弟组件通信的示例代码
08-29
Vue 2.0 中 Event Bus 实现兄弟组件通信的示例代码 Vue 2.0 中 Event Bus 是一种实现兄弟组件通信的方式。在 Vue 1.0 中，组件之间的通信主要通过 vm.$dispatch 沿着父链向上传播和用 vm.$broadcast 向下广播来实现...
兄弟组件之间的通信
njknjkjnjk的博客
07-01 582
4、注意：发送数据和与之对应的接收数据采用的事件名必须一致。1、在所有的组件以外创建一个用于传递数据的中央总线。中央总线是一个没有任何选项区域和挂载点的Vue实例。组件A向组件B发送数据：数组在组件A内部，要传递给。
Vue中使用EventBus进行组件通信
qq_36529459的博客
03-09 800
Vue中的eventBus类似与js原生的事件，即CustomEvent事件，该事件主要是用于dom之间的互相通信，而eventBus则不同，eventBus主要用于组件之间的通信，该方法应用于兄弟组件之间通信偏多，但是，该方法也可以应用于父子之间的相互通信。 这里我以脚手架3.0为样例进行讲解接下来要使用的方法。 建立EventBus可以通过以下两种方法: 1) 在main.js中直接创建...
vue组件通信---非父子组件（bus）/任意组件间的通信（pubsub）
muzidigbig的博客
11-20 3941
方式一：bus中央总线 利用总线方式可以平级组件进行通信 无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线。 第一步：我们先来创建中央事件总线，在src/assets/下创建一个eventBus.js,内容如下 import Vue from 'vue' export default new Vue(); ...
Vue插件——组件间通信bus
where_slr的博客
08-03 529
vue中父子间通信常用的有 ( $on 和 $emit 搭配props); 兄弟间通信可以通过使用一个空的Vue实例作为中央事件总线，就是常说的bus；或者用vuex（小项目没必要使用）； bus在npm上网址 以下是自己看书，照例写的bus小插件： bus精华点就是，利用一个空的vue实例作为中央事件总线，这样无论是组件树的哪一层都能通信到， 使用$emit， $on， $off 分别来分发、监...
vue EventBus组件通讯
忙碌的菠萝
10-30 146
vue组件通讯 EventBus实现 在搭建架子的时候需要将头部组件Header中 按钮点击 来触发侧边栏组件Aside菜单的显示和隐藏的切换。需要将点击切换的状态值给传递到另外的组件中，而这两个组件不是父子关系。这个时候可以使用EventBus来实现组件之间的值传递。 如下： 1.新建bus.js import Vue from 'vue'; // 使用 Event Bus const bus = new Vue(); export default bus; 2.在Header中触发方法 在He
VUE组件通信bus
w_t_y_y的博客
05-19 308
一、语法： 用于组件通信，这两个组件可以是父子关系、兄弟关系，也可以没有任何关系。bus使用$emit， $on， $off 分别来分发、监听、取消监听事件。 使用方法： 1、引入：在main.js中加上： import VueBus from 'vue-bus'; Vue.use(VueBus); 2、分发事件的组件 // ... methods: { todo: function () { this.$bus.$emit('todoSth', params); //para
使用bus实现Vue组件间通信
Tayshin的博客
07-05 1098
Vue组件间通信实现方法很多，主要有： 1.使用Vuex实现项目的状态管理（官方推荐） 2.props实现数据传递（父子组件，详细可查Vue官方文档） 3.网上很多博客提到的$dispatch ,$broadcast 方法，不过在Vue2.0中已经废弃 4.使用中转站（bus）的方法，可以方便的组件间通信 主要记录下第四种方法： 主要思路是设置一个额外的Vue对象作为中转站。 在组件
Vue组件通信之Bus
Ee2222的博客
09-06 872
组件通信实现 无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。 将bus定义到全局 // app.js var eventBus = { install(Vue,options) { Vue.prototype.$bus = vue } }; Vue.use(eventBus); 使用emit，emit...
vue组件通信?eventBus 讲解
lk19910323的博客
04-22 287
⽗传⼦ 在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进 ⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值 ⼦传⽗ ⼦组件通过this.$emit("⾃定义的事件",要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,通过⽅法来 接收传递的数据 ⾮⽗⼦组件通信 通过中央事件总线,我们也称之为eventBus, 我们需要创建⼀个空的js⽂件,在这个⽂件⾥⾯创建空的vue实例,然后导出这个空..
vue组件通信? eventBus 讲解
zhangyu812的博客
04-22 338
⽗传⼦ 在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进 ⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值 ⼦传⽗ ⼦组件通过this.$emit("⾃定义的事件",要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,通过⽅法来 接收传递的数据 ⾮⽗⼦组件通信 通过中央事件总线,我们也称之为eventBus, 我们需要创建⼀个空的js⽂件,在这个⽂件⾥⾯创建空的vue实例,然后导出这个空的vue实例,...
Vue2.0子组件同级通信：使用事件总线eventBus
总结：Vue2.0中，子同级组件间的通信主要通过事件总线(event bus)实现，通过创建一个独立的Vue实例作为通信媒介，组件通过触发和监听自定义事件来传递和接收数据。这种方法简洁易懂，适用于轻量级的数据交互需求。但...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值