Events Bus

================

For most usecases, you probably should just use provide/inject instead, though.

Overview

This package provides an alternative communication method, allowing components to communicate with each other by emitting and watching emitters from a global map ref.

Installation

npm install vue3-composition-event-bus or yarn add vue3-composition-event-bus or pnpm i vue3-composition-event-bus

Usage

To use the events bus, import the useEventsBus function in your Vue components and call it to get the emit function and emitters map ref.

Component A emits an event when a button is clicked, and Component B listens to the same event and logs the message to the console.

Component A:

import useEventsBus from 'vue3-composition-event-bus';

export default {
  setup() {
    const { emit } = useEventsBus();

    // Emit an event when a button is clicked
    const handleClick = () => {
      emit('my-event', 'Hello, world!');
    };

    return { handleClick };
  },
};

Component B:

import useEventsBus from 'vue3-composition-event-bus';

export default {
  setup() {
    const { emitters } = useEventsBus();

    // Watch the event and log the message
    watch(
      () => emitters.value.get('my-event'),
      (value) => {
        console.log('bus received!! ', value);
      }
    )
  },
};

API

useEventsBus

Returns an object with emit function for registering an emitter, and a Map of emitters, for watching within a Vue component.

emit(event, ...args)

Emits an event with the given event name and args.

emitters

Map ref containing all current emitters.