/vue-events

Simple event handling for Vue.js

Primary LanguageJavaScriptMIT LicenseMIT

vue-events

A Vue.js plugin that simplify events.

Works with both Vue 1.0 & Vue 2.0.

Installation

1.) Install package via Yarn or NPM
$ yarn add vue-events

$ npm install vue-events
2.) Install plugin within project.
import Vue from 'vue'
import VueEvents from 'vue-events'
Vue.use(VueEvents)

window.Vue = require('vue')
require('vue-events')

Methods

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

Usage

The $events prototype object.

This plugin extends Vue.prototype to include a new $events object, which is a just a plain vm that will serve as your global event bus. The $events vm has a couple aliases for the standard event methods.

Firing an event

There are 3 methods that fire events.

Note: $events.fire & $events.emit are aliases for $events.$emit

new Vue({

  data() {
    return {
      eventData: {
        foo: 'baz'
      }
    }
  },

  mounted() {
    this.$events.fire('testEvent', this.eventData);
    this.$events.emit('testEvent', this.eventData);
    this.$events.$emit('testEvent', this.eventData);
  }

})

Listening for an event

There are 3 methods that register event listeners.

Note: $events.listen & $events.on are aliases for $events.$on.

new Vue({
  mounted() {
    this.$events.listen('testEvent', eventData => console.log(eventData));
    this.$events.on('testEvent', eventData => console.log(eventData));
    this.$events.$on('testEvent', eventData => console.log(eventData));
  }
})

Removing an event listener

There are 3 methods that remove event listeners.

Note: $events.off & $events.remove are aliases for $events.$off.

new Vue({
  mounted() {
    this.$events.on('testEvent', eventData => console.log(eventData));
  },

  beforeDestroy() {
    this.$events.$off('testEvent')
    this.$events.off('testEvent')
    this.$events.remove('testEvent')
  }
})

The events component options.

Provide an events map as part of your component options and vue-events will automatically call $on when the component is mounted and $off when the component is destroyed.

new Vue({
  events: {
    testEvent(eventData){
       console.log(eventData)    
    }
  }  
})

Inside the event handlers, this is bound to the component instance. This way you can access your component's data, props, computed, methods, etc. For example:

new Vue({
  events: {
    onShowAlert(message){
       this.modalVisible = true
       this.message = message
    }
  }  
})

Demo

If you'd like to demo vue-events try vue-mix

License

MIT