【Vue】全局事件总线（EventBus）的使用

最新推荐文章于 2024-05-15 10:00:00 发布

Summer⊙

最新推荐文章于 2024-05-15 10:00:00 发布

阅读量852

点赞数

分类专栏： Vue学习笔记文章标签： vue.js vue 前端学习

本文链接：https://blog.csdn.net/qq_44862029/article/details/125661218

版权

注册事件总线

main.js

//方式一
new Vue({
   
  ···
  beforeCreate(){
   
    Vue.prototype.$bus = this
  },
 ···
})
//方式二
new Vue({
   
  ···
  beforeCreate(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Summer⊙

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue】全局事件总线（EventBus）的使用

注册事件总线main.js使用接收销毁事件总线注意使用完最好要在beforeDestroy中销毁
复制链接

扫一扫

专栏目录

VUE 创建全局事件 eventbus

qq_42052896的博客

01-05

1227

VUE 创建全局事件 eventbusVue组件通讯父子组件通讯存在的局限性EventBus的简介EventBus的使用初始化发送事件接收事件移除事件监听者 Vue组件通讯 Vue组件数据通讯常常会有父子组件，兄弟组件，祖孙组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。父子组件通讯存在的局限性我们了解到，vue中为了提高组件的复用和重用性，通常会分割成独立的组件，这时候就会存在父组件与子组件。父组件通过props传递数据给子组件，子组件通过emit通知父组件做相应的动作。但是这种父子组件

Vue中事件总线EventBus的使用

风如也的博客

08-18

794

EventBus 称事件总线，在 vue 项目中作为沟通桥梁的概念，就像所有组件公用相同的事件中心，可以向该中心注册发送事件或接收事件。使用 EventBus 先来说一个使用场景，项目中假设资产信息管理中有不同类别的资产模块，我们需要在页面中多次调用不同类别的资产查看资产详情页面。可以使用事件总线，封装一个详情弹框组件，通过类别名和类别 id 调出对应的详情组件。初始化 EventBus 在 main.js 中初始化事件总线，使用两个方法 $on 和 $emit，$emit 用于创建发出的事件，$o

参与评论您还未登录，请先登录后发表或查看评论

vue组件通信必知必会——事件总线Event Bus

05-15

1301

主要介绍了vue项目中，如何使用EventBus（事件总线）实现跨组件通信，并了解vue2和vue3中不同组件之间，生命周期构子函数执行的顺序。

Vue 全局事件总线 Event-Bus

qq_40792800的博客

08-03

761

3、在 Vue 原型对象，以及组件实例对象上都是不存在这个东西的，但是我们又需要使用 Vue 实例对象上的 $on、$emit、$off 等方法，所以这玩意应该继承了 Vue 原型对象，或者组件实例对象。两个兄弟组件之间没有任何关联，但是现在需要 School 子组件获取到 Student 子组件传递的数据，这个时候，我们的事件总线就起到作用了。相当于是独立于所有组件之外的旁观者，不参与组件内的任何逻辑，只负责调用 Vue 实例对象上的方法，且所有组件都能访问到它。定义 Student 子组件。

前端vue2中全局事件EventBus的使用方法

m0_49714202的博客

11-19

1676

前端vue2中全局事件EventBus的使用方法

[Vue]全局事件总线

emmmm.....

10-18

5883

1. 全局事件总线 2. $on() $off() $emit() 存放位置 3. 组件实例对象作为全局事件总线 4. Vue实例对象作为全局事件总线 5. 事件总线实现组件数据互传

vue2 全局事件总线

weixin_62219002的博客

07-05

652

在上面的示例中，当 ComponentA 组件中的 handleClick 方法被调用时，它会使用 eventBus.$emit 发布一个名为 custom-event 的事件，并传递数据 data。Vue.js 中的全局事件总线是一种事件通信机制，它允许不同组件之间进行跨层级的通信，而无需显式地在它们之间传递数据。Vue.js 的全局事件总线通常使用一个空的 Vue 实例作为事件中心，通过事件的发布与订阅来实现组件之间的通信。这种机制可以在大型应用程序中方便地实现组件间的通信和数据传递。

使用 vue 事件总线（EventBus）

qq_34261347的博客

09-17

285

EventBus的简介 EventBus又称为事件总线。在Vue中可以使用EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。如何使用EventBus 初始化首先创建事件总线并将其导出，方便其他模块使用或者监听它，有两种方式来处理第一种，创建一个event_bus.js文件 //

vue事件总线 - EventBus

nunumaymax的博客

07-05

399

在vue组件中，常见的有父子组件通信，兄弟组件通信等，但是如果两个页面没有任何引入和被引入关系，除了使用 vuex 来处理组件之间的数据通信，还可以考虑vue中的事件总线(EventBus) 来通信。在vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”。因此，我们通常情况下，还是会使用更完善的 vuex 作为状态管理中心，

VUE3的全局事件总线

MCCLS的博客

07-14

2447

全局事件总线。

在Uni中使用Vue的EventBus总线机制操作

10-15

在`main.js`这个全局配置文件中，我们可以初始化一个全新的Vue实例，将它作为我们的事件总线： ```javascript // main.js import Vue from 'vue'; export const EventBus = new Vue(); ``` 创建完`EventBus`后，...

详解vue 组件之间使用eventbus传值

08-29

EventBus 是一种轻量级的事件总线系统，允许我们在不同组件之间传递数据。使用 EventBus，我们可以在一个组件中触发事件，而在另一个组件中监听该事件。这样，我们就可以实现组件之间的数据传递。使用 EventBus 的...

Vue EventBus自定义组件事件传递

08-27

`EventBus`是一种轻量级的事件总线，它其实就是一个新的Vue实例。通过这个实例，我们可以发布（$emit）和订阅（$on）事件，从而在不直接依赖父组件或子组件关系的情况下，实现组件间的通信。这在处理非父子组件之间...

VueEventBus:Vue的EventBus实现

05-10

1. **创建事件总线**: 首先，我们需要创建一个全新的Vue实例，这个实例将作为事件总线，用于发布和监听事件。 ```javascript const EventBus = new Vue(); ``` 2. **发布事件** (emit): 在一个组件中，我们可以使用`...

Vue组件通信eventbus封装-类方式.zip

08-02

Vue官方提供了多种通信方式，如props、Vuex状态管理、事件总线(Event Bus)等。本教程主要关注的是使用Event Bus进行组件间通信的类方式封装。 Event Bus，又称自定义事件，是一种轻量级的通信机制，它通过创建一个...

Vue组件通信eventbus封装-构造函数方式.zip

08-02

这个压缩包文件"Vue组件通信eventbus封装-构造函数方式.zip"内包含了一个名为`EventBus2.js`的文件，很显然，它是对Vue事件总线的一种实现，使用了构造函数的方式。首先，我们要理解什么是EventBus。EventBus是一...

vue通信方式EventBus的实现代码详解

12-03

`EventBus`，也被称为事件总线，是一种基于发布/订阅模式的设计模式。在Vue中，它通常通过创建一个全局的Vue实例来实现，用于在不相关的组件之间传递数据或触发事件。这个全局实例作为一个中间人，负责协调组件之间...

vue的keep-alive中使用EventBus的方法

12-10

`EventBus`是一种简单的组件间通信方式，通过创建一个新的Vue实例作为全局事件中心，使得非父子组件之间也能进行通信。在`main.js`中，我们可以这样设置全局的`EventBus`： ```javascript Vue.prototype.$eventBus ...

vue3全局事件总线使用

08-18

在Vue 3中，全局事件总线的实现方式与Vue 2有所不同。Vue 3推荐使用`mitt`库来实现全局事件总线的功能。下面是使用Vue 3和`mitt`库实现全局事件总线的示例：首先，安装`mitt`库： ```shell npm install mitt ``` 然后，在你的Vue应用程序的入口文件（通常是`main.js`）中，设置全局事件总线： ```javascript import { createApp } from 'vue'; import mitt from 'mitt'; const app = createApp(App); // 创建一个事件总线实例 const eventBus = mitt(); // 将事件总线实例挂载到Vue应用的全局属性中 app.config.globalProperties.$bus = eventBus; app.mount('#app'); ``` 现在，你可以在任何组件中通过`this.$bus`来访问全局事件总线，并使用它来触发和监听事件。在发送方组件中触发事件： ```vue <template> <button @click="sendMessage">发送消息</button> </template> <script> export default { methods: { sendMessage() { this.$bus.emit('message', 'Hello, EventBus!'); } } } </script> ``` 在接收方组件中监听事件： ```vue <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } }, mounted() { this.$bus.on('message', (text) => { this.message = text; }); } } </script> ``` 在接收方组件的`mounted`钩子函数中，我们使用`this.$bus.on`方法来监听名为`message`的事件，并在事件触发时更新组件的`message`数据。这样，当发送方组件点击按钮时，会触发`message`事件，并传递消息内容给接收方组件，接收方组件会更新界面上的文本。这就完成了全局事件的传递与监听。