Skip to content

[vue] 你有用过事件总线(EventBus)吗?说说你的理解 #314

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] 你有用过事件总线(EventBus)吗?说说你的理解

Activity

getanimation

getanimation commented on Jul 15, 2019

@getanimation

也是组件传值的一种方式(例如兄弟组件)

lllpla

lllpla commented on May 25, 2021

@lllpla

我理解:事件总线是事件通知的总线,不应该滥用事件总线来进行传值。
首先应该规范并统一事件的定义:
比如:某对象+发生某动作
例如:“客户1---信息发生了变更”

其他组件进行监听时候实际上只关注特定对象的特定动作。

sc950828

sc950828 commented on Sep 23, 2022

@sc950828

就是一个vue实例,利用了vue的$on、$off、$emit方法

不过在vue3中这些方法被移除了。如果还要使用,需要利用 mitt插件

Cai-zhiji

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

在Vue中,事件总线是一种用于组件间通信的机制,允许不同组件之间进行事件的发布和订阅。

事件总线本质上是一个中央事件管理器,充当了组件之间的中介。它提供了一种简单而强大的方式,使得组件能够进行解耦,通过事件的方式进行通信,而不需要直接引用和依赖其他组件。

使用事件总线可以有效地解决跨组件通信的问题,特别是当组件层级较深或组件之间没有直接父子关系时。它可以减少组件之间的耦合性,提高代码的可维护性和可重用性。

示例

// 创建事件总线实例
const eventBus = new Vue();

// 在组件A中订阅事件
eventBus.$on('eventName', (data) => {
  // 处理事件的回调逻辑
});

// 在组件B中发布事件
eventBus.$emit('eventName', eventData);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@lllpla@sc950828@Dyrixu@getanimation

        Issue actions

          [vue] 你有用过事件总线(EventBus)吗?说说你的理解 · Issue #314 · haizlin/fe-interview