Vue3中自定义事件总线的实现代码

前言

在 Vue 开发中，组件之间的通信是一个常见的需求，无论是父组件向子组件传递数据，还是子组件向父组件传递数据，甚至是兄弟组件之间的数据交换。这些通信需求在构建复杂的 Vue 应用时尤为关键。

Vue 提供了多种组件通信的方式，如 props 用于父组件向子组件传递数据，emit 用于子组件触发事件并传递数据给父组件，vuex 适用于状态管理场景，而 provide/inject 则提供了依赖注入的方式。在 Vue 2 中，还有 eventBus 和 $attrs/$listeners 以及 $parent/children 等方法来辅助组件间的通信。

然而，随着 Vue 3 的发布，一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再适用或有所变化。为了应对这种变化，我们可以选择在 Vue 3 应用中实现自定义的“事件总线”机制。这种机制通常是将一个事件中心（或称为事件总线）挂载到Vue的全局对象上，从而使得任何组件都可以方便地通过事件总线来发布或监听事件。

通过使用这样的自定义事件总线，开发者可以在 Vue 3 应用中实现灵活的组件间通信，无论这些组件之间的层级关系如何，都能轻松地实现数据和事件的传递。

发布-订阅模式

发布-订阅模式（Publish-Subscribe Pattern）是一种在软件设计中常见的模式，它允许消息发送者和接收者之间通过事件进行通信，而不必直接相互依赖。这种模式的主要思想是通过一个被称为“消息中心”或“事件总线”的实体来协调消息的发布和订阅。

一个完整的发布-订阅模式通常包含以下几个部分：

• 发布者（Publisher）：负责向消息中心发布事件或消息的对象。发布者通常不关心谁订阅了这些事件，只负责在特定情况下触发它们。
• 订阅者（Subscriber）：对特定事件感兴趣的对象，它们会向消息中心订阅这些事件。当发布者发布一个事件时，所有订阅了该事件的订阅者都会收到通知。
• 消息中心（Event Bus/Message Center）：负责管理事件的发布、订阅和通知的对象。它存储了事件和订阅者之间的关系，并在事件被发布时，将事件通知给所有订阅了该事件的订阅者。

发布-订阅模式的优点包括：

• 解耦性：发布者和订阅者之间不存在直接的依赖关系，这使得它们可以独立地变化，而不需要修改对方。这种解耦性提高了代码的可维护性和可扩展性。
• 可扩展性：可以轻松地添加新的发布者和订阅者，而无需修改现有的代码。这使得系统能够灵活地适应不断变化的需求。
• 灵活性：支持多个订阅者同时订阅同一个事件，并且可以根据需要定制事件的处理方式。这种灵活性使得系统能够应对各种复杂场景。
• 时间解耦：发布者可以在任何时刻发布事件，而订阅者则可以在自己方便的时候处理这些事件。这种时间解耦性使得系统更加灵活和高效。

综上所述，发布-订阅模式提供了一种强大而灵活的方式来处理组件之间的通信和协作，使得系统更加健壮、可维护和可扩展。在Vue.js 等现代前端框架中，发布-订阅模式被广泛应用于组件之间的通信和状态管理。

实现发布-订阅模式

在深入探讨发布-订阅模式时，其核心机制在于一个精心构建的事件中心。这个事件中心不仅作为消息的中转站，还承载着存储事件和订阅者之间关系的重要职责。

事件中心

定义一个 EventBus 类，用于存储事件和订阅者关系，代码如下：

interface EventType {
  readonly callback: Function
  readonly once: boolean
}

type EventsType = Record<string, EventType[]>
class EventEmitter {
  private events: EventsType = {};
}

events 是一个对象，其中每个键都是事件名称，值是一个由 EventType 对象组成的数组，EventType 对象中包含是否只订阅一次标志位和回调函数。

发布事件

定义一个 emit 方法，用于发布事件，代码如下：

type EventArgs = Record<string, number | string | object | boolean>

interface EventType {
  readonly callback: Function
  readonly once: boolean
}

type EventsType = Record<string, EventType[]>

class EventEmitter {
  private events: EventsType = {}
  
  emit(eventName: string, eventArgs: EventArgs) {
    eventName?.split(',').forEach((eventKey: string) => {
      eventKey = eventKey.trim()
      const events = this.events[eventKey] || []
      let { length } = events

      for (let i = 0; i < length; i++) {
        const { callback, once } = events[i]
        if (once) {
          events.splice(i, 1)
          if (length === 0) {
            delete this.events[eventKey]
          }
          length--
          i--
        }

        callback.apply(this, [eventArgs])
      }
    })
  }
}

emit 方法接收两个参数，第一个参数 eventName 为事件名称，第二个参数 eventArgs 为事件参数。其中 eventName 参数可以是一个以逗号分隔的字符串，表示同时发布多个事件。核心逻辑便是遍历 events 对象，找到对应的事件名称，然后遍历事件名称对应的事件数组，依次通过调用 apply 方法，执行回调函数。

订阅事件

定义一个 on 方法，用于订阅事件，代码如下：

class EventEmitter {
  private events: EventsType = {}

  on(eventName: string, callback: CallbackType, once?: boolean) {
    eventName?.split(',').forEach((eventKey: string) => {
      eventKey = eventKey.trim()
      if (!this.events[eventKey]) {
        this.events[eventKey] = [];
      } else {
        this.events[eventKey].push({
          callback,
          once: !!once
        })
      }
    })

    return this
  }
}

on 方法接收三个参数，第一个参数 eventName 为事件名称，第二个参数 callback 为回调函数，第三个参数 once 表示是否只订阅一次。核心逻辑是遍历 eventName 参数 split 之后的数组对象(允许同时监听多个事件，多个事件之间以逗号分隔)，将事件名称拆分成数组，然后遍历数组，将回调函数存入 events 对象中。

取消订阅事件

定义一个 off 方法，用于取消订阅事件，代码如下：

class EventEmitter {
  private events: EventsType = {}

  off(eventName: string, callback?: CallbackType) {
    // 如果不传callback，就清除所有事件
    if (!eventName) {
      this.events = {}
    }
    eventName?.split(',').forEach((eventKey: string) => {
      if(!callback) {
        delete this.events[eventKey]
      }
      const events = this.events[eventKey] || []
      let { length } = events
      for (let i = 0; i < length; i++) {
        if (events[i].callback === callback) {
          events.splice(i, 1)
          length --
          i --
        }
      }

      if (events.length === 0) {
        delete this.events[eventKey]
      }
    })

    return this
  }
}

off 方法接收两个参数，第一个参数 eventName 为事件名称，第二个参数 callback 为回调函数，核心逻辑是遍历 eventName 参数 split 之后的数组对象(允许同时取消订阅多个事件，多个事件之间以逗号分隔)，将事件名称拆分成数组，然后遍历数组，将回调函数从数组中删除。

只订阅一次

定义一个 once 方法，用于只订阅一次，代码如下：

class EventEmitter {
  private events: EventsType = {}

  once(eventName: string, callback: CallbackType) {
    return this.on(eventName, callback, true)
  }
}

once 方法接收两个参数，第一个参数 eventName 为事件名称，第二个参数 callback 为回调函数。once 方法内部调用 on 方法，并将第三个参数设置为 true，表示只订阅一次。

如何在 Vue 中使用

当我们想要在 Vue 应用中使用发布-订阅模式时，通常会引入一个全局的事件总线 （Event Bus） 来作为通信的中心。这样，无论组件之间有着怎样的层级关系，它们都可以轻松地通过事件总线进行通信。

为了在 Vue 应用中实现这一功能，我们需要在应用的入口文件（通常是 main.ts 或 main.js，取决于你的项目配置和所使用的 TypeScript 或 JavaScript）中引入并实例化事件总线。然后，我们可以利用 Vue 的 provide 方法将事件总线注册为全局对象，使得在 Vue 应用的任何组件中都能通过 inject 来访问它。

在 main.ts 中编写代码如下：

import { createApp } from 'vue'
import { EventEmitter } from '@qftjs/tiny-editor-core'
import App from './App.vue'

const app = createApp(App)

const bus = new EventEmitter()
app.provide('$bus', bus)

app.mount('#app')

在 Vue 组件中通过 inject 方法注入 $bus 对象，然后就可以使用 $bus 对象进行事件订阅和事件发布。具体代码如下：

<script setup lang="ts">
import { inject } from 'vue'

const $bus = inject('$bus')

$bus.emit('dragStart')
</script>

以上就是Vue3中自定义事件总线的实现代码的详细内容，更多关于Vue3自定义事件总线的资料请关注脚本之家其它相关文章！

最新评论