Back to Vueuse

useEventBus

packages/core/useEventBus/index.md

14.3.01.0 KB
Original Source

useEventBus

A basic event bus.

Usage

ts
import { useEventBus } from '@vueuse/core'

const bus = useEventBus<string>('news')

function listener(event: string) {
  console.log(`news: ${event}`)
}

// listen to an event
const unsubscribe = bus.on(listener)

// fire an event
bus.emit('The Tokyo Olympics has begun')

// unregister the listener
unsubscribe()
// or
bus.off(listener)

// clearing all listeners
bus.reset()

Listeners registered inside of components setup will be unregistered automatically when the component gets unmounted.

TypeScript

Using EventBusKey is the key to bind the event type to the key, similar to Vue's InjectionKey util.

ts
// fooKey.ts
import type { EventBusKey } from '@vueuse/core'

export const fooKey: EventBusKey<{ name: foo }> = Symbol('symbol-key')
ts
import { useEventBus } from '@vueuse/core'

import { fooKey } from './fooKey'

const bus = useEventBus(fooKey)

bus.on((e) => {
  // `e` will be `{ name: foo }`
})