1.0.1 • Published 1 year ago
tino-event-bus v1.0.1
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()