1---
2category: Utilities
3---
4 
5# useEventBus
6 
7A basic event bus.
8 
9## Usage
10 
11```ts
12import { useEventBus } from '@vueuse/core'
13 
14const bus = useEventBus<string>('news')
15 
16function listener(event: string) {
17  console.log(`news: ${event}`)
18}
19 
20// listen to an event
21const unsubscribe = bus.on(listener)
22 
23// fire an event
24bus.emit('The Tokyo Olympics has begun')
25 
26// unregister the listener
27unsubscribe()
28// or
29bus.off(listener)
30 
31// clearing all listeners
32bus.reset()
33```
34 
35Listeners registered inside of components `setup` will be unregistered automatically when the component gets unmounted.
36 
37## TypeScript
38 
39Using `EventBusKey` is the key to bind the event type to the key, similar to Vue's [`InjectionKey`](https://antfu.me/posts/typed-provide-and-inject-in-vue) util.
40 
41```ts
42// fooKey.ts
43import type { EventBusKey } from '@vueuse/core'
44 
45export const fooKey: EventBusKey<{ name: foo }> = Symbol('symbol-key')
46```
47 
48```ts
49import { useEventBus } from '@vueuse/core'
50 
51import { fooKey } from './fooKey'
52 
53const bus = useEventBus(fooKey)
54 
55bus.on((e) => {
56  // `e` will be `{ name: foo }`
57})
58```
59 
60## Type Declarations
61 
62```ts
63export type EventBusListener<T = unknown, P = any> = (
64  event: T,
65  payload?: P,
66) => void
67export type EventBusEvents<T, P = any> = Set<EventBusListener<T, P>>
68export interface EventBusKey<T> extends Symbol {}
69export type EventBusIdentifier<T = unknown> = EventBusKey<T> | string | number
70export interface UseEventBusReturn<T, P> {
71  /**
72   * Subscribe to an event. When calling emit, the listeners will execute.
73   * @param listener watch listener.
74   * @returns a stop function to remove the current callback.
75   */
76  on: (listener: EventBusListener<T, P>) => Fn
77  /**
78   * Similar to `on`, but only fires once
79   * @param listener watch listener.
80   * @returns a stop function to remove the current callback.
81   */
82  once: (listener: EventBusListener<T, P>) => Fn
83  /**
84   * Emit an event, the corresponding event listeners will execute.
85   * @param event data sent.
86   */
87  emit: (event?: T, payload?: P) => void
88  /**
89   * Remove the corresponding listener.
90   * @param listener watch listener.
91   */
92  off: (listener: EventBusListener<T>) => void
93  /**
94   * Clear all events
95   */
96  reset: () => void
97}
98export declare function useEventBus<T = unknown, P = any>(
99  key: EventBusIdentifier<T>,
100): UseEventBusReturn<T, P>
101```
102