A Vue.js plugin that simplify events.
Works with both Vue 1.0
& Vue 2.0
.
$ yarn add vue-events
$ npm install vue-events
import Vue from 'vue'
import VueEvents from 'vue-events'
Vue.use(VueEvents)
window.Vue = require('vue')
require('vue-events')
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 |
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.
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);
}
})
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));
}
})
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')
}
})
If you'd like to demo vue-events
try vue-mix