vue的事件总线--eventBus用法

Vue2 封装全局事件总线（Event Bus） 实现跨组件通信 - 附完整示例

在Vue中，使用event bus是一种常见的实现组件间通信的方法。Event bus是一个空的Vue实例，用于在应用程序内部传递事件。本篇博客将介绍如何创建和使用Vue event bus。

在全局定义，全项目通讯

第一步：创建一个Bus.js文件，创建bus import Vue from 'vue' const Bus = new Vue() export default Bus 第二步：在需要互相通信的组件中引入Bus.js文件（A/B组件） import Bus from '@/utils/Bus.js' 第三步：组件A中调用组件B中的方法 Bus.$emit('editNode',params) //前是被调用的B中的方法名，后是传递的参数 第四步：组件B中接收A传过来的值 Bus.$on('

事件总线是一种组件通信方式，用于在工程的中的任意组件中进行事件触发和数据传递。通过在全局创建一个事件总线，所有组件（无论他们的关系是父子还是兄弟还是不相关）都可以使用同一个总线发送事件和监听事件，传输数据。这样通信就可以不受组件间关系限制，实现灵活的通信能力。事件总线作为一种全局的组件通信方法，符合订阅发布模式，由于其简单有效的使用方式，受到部分开发者的欢迎。但是由于各种使用不慎和维护带来的问题，官方和许多开发者也不推荐使用：在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。

在构建复杂前端应用时，组件间的通信是必不可少的一环。Vue.js 提供了多种方式来实现这一目标，包括父子组件间的props传递、自定义事件、Vuex等。然而，在某些场景下，如果多个无直接父子关系的组件需要进行通信，则可以采用全局事件总线（Global EventBus）的方式。本文将详细介绍如何在Vue项目中实现并利用EventBus来促进组件间通信，帮助你更高效地组织和管理应用逻辑。

介绍： vue组件通信有很多，比如父子组件，兄弟组件通信，还有vuex。如果两个组件之间不存在父子，也不存在兄弟关系的时候，那要是想在一个组件里面点击了一个按钮，并触发另一个组件刷新数据的时候该怎么办？ 首先可以想到的是使用vuex，点击按钮的时候修改vuex里面的值，然后在另一个组件里面监听这个值，当发生变化的时候并刷新数据。 逻辑上是可以的，不过就是太麻烦了，今天给大家推荐一个新的组件传值方式，总线传值eventBus。 一、首先在main.js里面初始化一个事件总线实例。 其实就是重新构造一

eventbus的使用

vue的eventBus 首先在main.js中 Vue.prototype.$eventBus = new Vue() A组件中通过触发事件或者其他什么，然后发射数据 this.$eventBus.$emit('key','data-1232131232132131232'); B组件中接收A组件的数据 this.$eventBus.$on('key',function(...

【vue3/vue2】event库概述：本次所使用到的库为通用库，若在node环境使用则无需npm安装，本身自带的；浏览器环境下使用才需要npm安装。events库是从 Node.js 上移植Events模块的功能，因此可用的API完全一致（除了仅限在node环境下使用的API）；若想进一步深入，去看node官网的event文档即可。（注意版本差异！根据npm文档的描述，该库目前并未同步最新Node里对应的events模块）在VUE3的官方文档中描述到：【平级组件或是跨越多层嵌套的组件间通信，

今天咱们来聊聊Vue项目中一个简单实用的跨组件通信方案——Event Bus（事件总线）。它就像个广播电台，让任意组件之间都能轻松"喊话"，特别适合那些没有直接父子关系的组件通信。

vue事件总线（EventBus）的使用

vue 中兄弟组件或者多级组件之间的通讯，是比较麻烦的，这个时候呢，我们就可以使用 EventBus来实现我们想要的业务，但是面试的时候又经常会被问到，或者让写出 EventBus，所以就来探索一下 一、Vue中如何使用 EventBus？ 1. 初始化时全局定义 import Vue from 'vue' // main.js 中 // 第一种定义方式 Vue.prototype.$eventBus = new Vue() // 第二种定义方式 window.eve...