Git Product home page Git Product logo

muxiu1997 / vue-use-emitter Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 254 KB

A Vue composable event emitter library based on mitt, featuring an `autoOff` method for automatic call `off` on component unmount and dependency injection for ease of use, simplifying inter-component communication with minimal code.

License: MIT License

TypeScript 93.05% JavaScript 6.95%
emitter eventemitter events mitt vue vue-demi

vue-use-emitter's Introduction

vue-use-emitter

A Vue composable event emitter library based on mitt, featuring an autoOff method for automatic call off on component unmount and dependency injection for ease of use, simplifying inter-component communication with minimal code.

Install

$ npm install @muxiu1997/vue-use-emitter
import defineEmitterComposable from '@muxiu1997/vue-use-emitter'

Usage

// Defining an emitter composable
const useMyEmitter = defineEmitterComposable<MyEvents>({ key: 'myEmitterKey' });

// Providing an emitter at the parent component
const parentComponent = defineComponent({
  setup() {
    const myEmitter = useMyEmitter('provide');
    myEmitter.emit('myEvent', 'Hello world!');
  }
});

// Injecting an emitter in a child component
const childComponent = defineComponent({
  setup() {
    const myEmitter = defineEmitterComposable<MyEvents>({ key: 'myEmitterKey' })('inject');
    myEmitter.autoOff('myEvent', () => console.log('Event received'));
  }
});

// Using with default emitter
const useDefaultEmitter = defineEmitterComposable<MyEvents>({
  key: 'myEmitterKey',
  injectDefault: () => wrapAutoOff(mitt())
})();

// Throwing error when no provider is found
const useStrictEmitter = defineEmitterComposable<MyEvents>({
  key: 'myEmitterKey',
  throwOnNoProvider: () => new Error('Emitter not found')
})();

License

MIT

vue-use-emitter's People

Contributors

github-actions[bot] avatar muxiu1997 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.