tino-event-bus

安装

# npm

$ npm i --save tino-event-bus


# yarn

$ yarn add tino-event-bus

简单使用

1、注册 eventBus 插件

// src/main.js

import App from './app.vue'
import { createApp } from 'vue'
import * as TinoEventBus from 'tino-event-bus'

const app = createApp(App)

app.use(TinoEventBus)
app.mount('#app')

2、注册事件

import { getCurrentInstance } from 'vue'

const eventBus = getCurrentInstance()?.appContext.app.config.globalProperties.eventBus
const subscriber = {
  // 事件发布后，此方法被调用。data 为发布时传递的数据
  onEventPublished (data) {
    console.log(data)
  }
}

// 注册事件
eventBus.registerSubscriber(事件名称, subscriber)

3、发布事件

import { getCurrentInstance } from 'vue'

const eventBus = getCurrentInstance()?.appContext.app.config.globalProperties.eventBus
const subscriber = {
  // 事件发布后，此方法被调用。data 为发布时传递的数据
  onEventPublished (data) {
    console.log(data)
  }
}

// 注册事件
eventBus.registerSubscriber(事件名称, subscriber)

// 发布事件，data表示需要传递到 onEventPublished 方法的数据
eventBus.publishEvent(事件名, data)

4、取消订阅

import { getCurrentInstance, onUnmounted } from 'vue'

const eventBus = getCurrentInstance()?.appContext.app.config.globalProperties.eventBus
const subscriber = {
  // 事件发布后，此方法被调用。data 为发布时传递的数据
  onEventPublished (data) {
    console.log(data)
  }
}

// 注册事件
eventBus.registerSubscriber(事件名称, subscriber)

// 发布事件，data表示需要传递到 onEventPublished 方法的数据
eventBus.publishEvent(事件名, data)

// 取消订阅
onUnmounted(() => {
  eventBus.unregisterSubscriber(事件名, subscriber)
})

5、销毁事件总线

import { getCurrentInstance, onUnmounted } from 'vue'

const eventBus = getCurrentInstance()?.appContext.app.config.globalProperties.eventBus

// 销毁事件总线
eventBus.destroyEventBus()