Vue—EventBus详解

最新推荐文章于 2024-08-15 10:31:28 发布
最新推荐文章于 2024-08-15 10:31:28 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42472040/article/details/108517856
版权
Vue 专栏收录该内容
57 篇文章 28 订阅 ¥19.90 ¥99.00
订阅专栏
本文详细介绍了Vue中的EventBus，一种用于非父子组件间通信的轻量级解决方案。文章涵盖局部和全局EventBus的注册方法，提供代码示例，并探讨了使用JS类实例对象作为EventBus、通过EventBus设置共享数据和方法以及监听共享数据的拓展应用场景。
摘要由CSDN通过智能技术生成

目录

一、概述

二、注册局部EventBus

三、注册全局EventBus

四、代码示例

五、拓展

一、概述

EventBus即事件总线，是一种实现非父子组件通信的轻量级解决方案，其本质是创建一个新的Vue实例，用该实例作为组件之间共享数据的桥梁及事件中心。

Vue组件之间的数据共享，针对不同场景，解决方案亦不同。简单的父子组件通信，可以使用props。项目复杂，多组件、高频率的通信，可以使用Vuex。非父子组件通信，且复杂度不高时，推荐使用EventBus解决。

二、注册局部EventBus

注册局部的EventBus很简单，只须在需要通信的组件内分别引入同一个EventBus即可。

步骤1：创建事件总线

创建JS文件࿰

了解本专栏 订阅专栏 解锁全文
VueEventBus:Vue的EventBus实现
05-10
Vue EventBus实现 替代Vuex实现组件数据、事件交互
Vue事件总线（EventBus）使用指南：详细解析与实战应用
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-31 1万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
Vue2 和 Vue3中EventBus使用差异
最新发布
前端探索者
08-15 1232
在前端开发中，组件之间的通信是一个非常重要的话题。Vue.js 提供了多种方式来实现这一点，本文将重点介绍在 Vue 2 中使用 EventBus 和在 Vue 3 中使用 mitt 来实现组件间通信的方式。正文开始💖💖💖在 Vue 2 中，使用 EventBus 是一种方便的方式来实现非父子组件之间的通信，但需要注意内存管理问题。在 Vue 3 中，推荐使用mitt，它提供了更轻量级、性能更高的解决方案，并且 API 更加简洁易用。
vue组件通信必知必会——事件总线Event Bus
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-15 2922
主要介绍了vue项目中，如何使用EventBus（事件总线）实现跨组件通信，并了解vue2和vue3中不同组件之间，生命周期构子函数执行的顺序。
Vue中 EventBus 的使用，如何实现Vue中的EventBus
程邓楠的博客
02-20 1万+
vue 中兄弟组件或者多级组件之间的通讯，是比较麻烦的，这个时候呢，我们就可以使用 EventBus来实现我们想要的业务，但是面试的时候又经常会被问到，或者让写出 EventBus，所以就来探索一下 一、Vue中如何使用 EventBus？ 1. 初始化时全局定义 import Vue from 'vue' // main.js 中 // 第一种定义方式 Vue.prototype.$eventBus = new Vue() // 第二种定义方式 window.eve...
Vue自定义组件事件传递：EventBus部分
weixin_33812433的博客
06-24 679
前言 组件化应用构建是Vue的特点之一，因此我们在Vue的实际开发过程中会经常需要封装自定义组件，以提高开发的效率。 而组件在大部分情况下并不会孤立的存在，它必然会与父组件和兄弟组件产生数据的交互。所以在这里为大家总结两种组件数据交互的方式：EventBus和利用Vuex框架进行状态管理。 我会通过两种不同的交互方式，它们对于父子组件间数据交互和兄弟组件间数据交互。 由于篇幅关系，本文主要介绍...
详解vue 组件之间使用eventbus传值
01-21
对于前端的我们而言，并非是只有写界面才是最大的问题，很多的...，（我们也不讨论已经废除的vm.$dispatch）很多情况下我们都是需要一个事件的捕获，这时候我们就可以用到vue的eventbus了 受用eventbus的方法很是简单
vue通信方式EventBus的实现代码详解
10-16
组件间通信是构建复杂应用时不可或缺的一环，在Vue中，除了使用props和事件以外，还可以使用EventBus进行组件间通信。EventBus的通信方式类似于发布/订阅模式，一个组件可以发布消息，而其他组件可以监听这些消息，...
vue 使用 eventBus
A secret makes a woman woman.
07-18 433
文件 vue-bus.js const install = function (Vue) { const Bus = new Vue({ methods: { emit (event, ...args) { this.$emit(event, ...args); }, ...
vue eventbus使用
Fisher_yu01的博客
05-27 527
vue的eventBus 首先在main.js中 Vue.prototype.$eventBus = new Vue() A组件中通过触发事件或者其他什么，然后发射数据 this.$eventBus.$emit('key','data-1232131232132131232'); B组件中接收A组件的数据 this.$eventBus.$on('key',function(...
vue中event bus的简单使用 使用详细介绍
ruiti的博客
10-20 1244
EventBus又称为事件总线。在Vue中可以使用EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。事件总线应用于同一路由传值 demo示例： 一、初始化 首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种，...
什么是Vue中的事件总线机制（EventBus）
bug处理进行时
06-06 2721
Vue事件总线机制 - EventBus 事件总线产生的背景 在vue中最核心的部分就是组件，组件间的通信就是重中之重。通信分为父子组件通信、兄弟组件通信、不相干的组件通信等等多种方式。父级向子级通过props传递数据，子级通过 $emit 向父组件通知事件。但是当两个毫不相关的组件互相通信时应该通过什么来实现呢？ EventBus的简介 EventBus 又称时间总线 ，理解上来讲 EventBus 机制是通知的概念，EventBus作为所有组件共享的事件中心，既可以发送事件也可以接受事件，所有组件都可以
vue小知识~eventBus
qq_31539817的博客
07-04 199
eventBus是指在向全区暴露这个vue对象，此时在任意一个地方都可以使用vue相关的实例 在main.js配置 Vue.prototype.$bus=new Vue() 此时整个应用都可以使用vue的实例，我们来用$on来举例； 在任意的vue文件中定义方法： created() { this.$bus.$on('changeBus', function() { console.log('bus'); }); }, 表示
vue eventBus实现兄弟组件互相通信
u010320804的博客
03-08 1922
vue父子组件的通信可以通过props和emit来实现，而兄弟组件无法通过props和emit通信。但是可以采用eventBus的方式来实现通信,主要的原理是新建一个bus，然后再两个兄弟组件之间引入这个bus，一个组件监听事件，而另一个组件则负责触发事件。父组件App.vue<template> <div id="app"> <img src="./as...
eventBus在vue中的使用
热门推荐
Annie的博客
07-01 2万+
在全局定义，全项目通讯
vue 的Event Bus使用
黄治文的博客
03-05 1855
vue项目中的eventbus是解决组件间通信的一个方法，关于组件通信，就是组件A和组件B需要共用一个数据，对于父子组件来说就比较简单，要是兄弟间，兄弟之外的组件要进行通信，官网给出的是vuex,对于使用vuex官网又提出以下建议 而这个简单的store模式就是使用eventbus； 关于eventbus就是创建一个新的vue实例，把数据需要公用的数据存储在它上面，通过$emi...
vue源码之 eventBus原理
小+
12-02 1188
VUE中eventBus可以用来进行任何组件之间的通信，我们可以把eventBus当成一个管道，这个管道两端可以接好多组件，两端的任何一个组件都可以进行通信。其实这个管道就是Vue实例，实例中的$on, $off, $emit方法来实现此功能。
Vue EventBus组件通信详解与示例
"Vue EventBus是Vue.js中一种常见的组件间通信方式，特别是在不涉及全局状态管理或者简单场景下，EventBus能提供轻量级的事件传递解决方案。Vue的组件化特性使得开发过程中需要频繁地在组件之间传递数据，EventBus...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值