vue发布订阅的实现

实现发布订阅模式

在Vue中可以通过EventBus或Vue.prototype全局事件总线来实现发布订阅模式。这种方式适合非父子组件间的通信。

创建事件总线：

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

订阅事件

组件中订阅自定义事件：

import { EventBus } from './event-bus.js'

export default {
  created() {
    EventBus.$on('custom-event', (payload) => {
      console.log('收到事件:', payload)
    })
  }
}

发布事件

触发自定义事件并传递数据：

import { EventBus } from './event-bus.js'

export default {
  methods: {
    triggerEvent() {
      EventBus.$emit('custom-event', { data: '测试数据' })
    }
  }
}

取消订阅

组件销毁时建议移除事件监听：

import { EventBus } from './event-bus.js'

export default {
  beforeDestroy() {
    EventBus.$off('custom-event')
  }
}

替代方案

对于Vue 2.x还可以使用：

// main.js
Vue.prototype.$eventBus = new Vue()

// 组件中使用
this.$eventBus.$emit('event')
this.$eventBus.$on('event', handler)

对于Vue 3.x推荐使用mitt等第三方库：

import mitt from 'mitt'
const emitter = mitt()

// 发布
emitter.emit('event', data)

// 订阅
emitter.on('event', (data) => {
  console.log(data)
})