事件总线原理介绍及实际应用场景，助力你玩转事件处理

前端

2023-02-17 09:39:30

事件总线：实现组件间无缝通信

事件总线 是一种流行的组件间通信机制，它允许应用程序的不同部分通过一个中心化的实体（即事件总线）进行交流。它充当一个中介者，将事件从一个组件传递到另一个组件。

理解事件总线原理

事件总线通常作为一个全局对象存在于应用程序中。组件可以通过注册事件监听器来订阅事件。当事件发生时，事件总线将通知所有已注册的监听器。通过这种方式，组件可以相互通信，而无需直接彼此引用。

事件总线的使用场景

事件总线在以下场景中非常有用：

组件间通信： 组件可以通过事件总线交换信息和触发动作。
发布订阅： 组件可以订阅特定事件，并在事件触发时接收通知。
全局事件处理： 事件总线可以用于处理应用程序范围内的事件，例如页面加载或用户认证。

Vue 3 中的事件总线实现

Vue 3 中可以使用 Composition API 来实现事件总线。Composition API 提供了 onBeforeUnmount 和 onMounted 生命周期钩子，用于在组件创建和销毁时注册和注销事件监听器。

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

// 组件 A 注册事件监听器
Vue.component('component-a', {
  setup() {
    onBeforeMount(() => {
      eventBus.$on('event-name', (data) => {
        // 处理事件
      });
    });
    onBeforeUnmount(() => {
      eventBus.$off('event-name');
    });
  },
});

// 组件 B 触发事件
Vue.component('component-b', {
  setup() {
    return {
      count: 0,
    };
  },
  methods: {
    incrementCount() {
      this.count++;
      eventBus.$emit('event-name', this.count);
    },
  },
  template: `<button @click="incrementCount">+</button>`,
});