Skip to content

VeryWow/vue-simple-events

Repository files navigation

vue-simple-events

Yet another event management plugin, but WITHOUT Vue instance

About

This is just a simple wrapper around js-simple-events that helps to manage events in a simple way without creating a Vue instance. It also supports TypeScript!

And it's really light - ~1kb in size!

API

Methods

Method Params Description
vm.$events.emit event, payload Emit the event with the given payload.
vm.$events.$emit event, payload Alias for emit
vm.$events.fire event, payload Alias for emit
vm.$events.on event, callback Listen for the event with the given callback.
vm.$events.$on event, callback Alias for on
vm.$events.listen event, callback Alias for on
vm.$events.once event, callback Listen for the event once, after handling - remove the listener.
vm.$events.$once event, callback Alias for $once
vm.$events.off event, callback Remove event listener(s) for the event.
vm.$events.$off event, callback Alias for off
vm.$events.remove event, callback Alias for off

Component Options

/// Some component.vue
export default {
  // registers event handlers on 'created'
  on: {
    handler(arg) {
      console.log(args)
    }
  },
  // Same as previous, but is called only once.
  once: {
    handler() {
      console.log('Just once')
    }
  }
}

Examples

// Import and initialize
import Vue from 'vue'
import EventManager from 'vue-simple-events'

Vue.use(EventManager)
/// Component 1

methods: {
  eventHandler(payload) {
    console.log('Yay, events work!', payload);
  },
  eventHandlerOnce(payload) {
    console.log('This will be called just once!');
  }
},
created() {
  this.$events.on('test', this.eventHandler);
  this.$events.once('test', this.eventHandlerOnce);
},
beforeDestroy() {
  this.$events.off('test', this.eventHandler);
  this.$events.off('test', this.eventHandlerOnce);
}
/// Component 2

created() {
  // Emit events
  this.$events.emit('test', 'Hello!');
  // Logs:
  // -> Yay, events work! Hello!
  // -> This will be called just once!

  this.$events.emit('test', 'Hello!');
  // Logs:
  // -> Yay, events work! Hello!
  // (The 'once' handler isn't fired)
}

Alternative way to set your event handlers is through the on and once Vue constructor options. In that way you may not worry about removing event handlers in beforeDestroy hook. This approach makes code cleaner and reduces the amount of boilerplate code.

/// Component 1
on: {
  test(payload) {
    console.log('Yay, events work!', payload);
  }
},
once: {
  test(payload) {
    console.log('This will be called just once!');
  }
}

Demo

webpack 4 biolerplate