当前位置：首页 > VUE

vue实现发布订阅模式

2026-02-23 01:54:19VUE

发布订阅模式简介

发布订阅模式（Pub/Sub）是一种消息通信范式，发布者（Publisher）不直接发送消息给订阅者（Subscriber），而是通过事件中心（Event Channel）进行中转。Vue 本身通过 $emit 和 $on 提供了简单的实现，但可以进一步扩展为更通用的方案。

基于 Vue 的简单实现

Vue 实例本身可作为事件中心，利用 $emit 和 $on 实现基础的发布订阅：

// 创建事件中心
const eventBus = new Vue();

// 订阅事件
eventBus.$on('event-name', (payload) => {
  console.log('收到消息:', payload);
});

// 发布事件
eventBus.$emit('event-name', { data: 'test' });

独立事件中心类

若需脱离 Vue 实例，可封装一个独立的 EventBus 类：

class EventBus {
  constructor() {
    this.events = {};
  }

  // 订阅
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  // 发布
  emit(event, ...args) {
    const callbacks = this.events[event];
    if (callbacks) {
      callbacks.forEach(cb => cb(...args));
    }
  }

  // 取消订阅
  off(event, callback) {
    const callbacks = this.events[event];
    if (callbacks) {
      this.events[event] = callbacks.filter(cb => cb !== callback);
    }
  }
}

// 使用示例
const bus = new EventBus();
bus.on('update', data => console.log(data));
bus.emit('update', '新数据');

结合 Vue 的 provide/inject

在 Vue 应用中，可通过 provide 和 inject 共享事件总线：

vue实现发布订阅模式

// 父组件提供事件总线
const EventBus = new Vue();
export default {
  provide() {
    return { eventBus: EventBus };
  }
};

// 子组件注入并使用
export default {
  inject: ['eventBus'],
  mounted() {
    this.eventBus.$on('event', this.handleEvent);
  },
  methods: {
    handleEvent(payload) { /* ... */ }
  }
};