Skip to content
Simple event handling for Vue.js
Branch: master
Clone or download
Latest commit 86bd9a6 Feb 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Use $once instead of $on for better cleanup. Apr 2, 2017
types Fix parameter types Oct 23, 2017
.gitignore initial commit Aug 8, 2016
.npmignore initial commit Aug 8, 2016
LICENSE initial commit Aug 8, 2016
README.md Document events map Feb 23, 2019
package.json Including types support Oct 23, 2017
yarn.lock Including types support Oct 23, 2017

README.md

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

You can’t perform that action at this time.