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')
}
})
Demo
If you'd like to demo vue-events
try vue-mix
License
MIT