A Vue.js plugin that provides a global event bus and a couple helper methods.
Works with both Vue 1.0
& Vue 2.0
$ npm install vue-events
import Vue from 'vue';
import VueEvents from 'vue-events';
Vue.use(VueEvents)
or
window.Vue = require('vue');
require('vue-events');
This plugin extends Vue.prototype
to include a new $events
object. The $events
object is a simple Vue model which
includes couple aliases for the vm.$emit
& vm.$on
methods.
There are 3 methods that fire events. They're functionally identical and only differ in name.
new Vue({
data() {
return {
eventData: {
foo: 'baz'
}
}
},
mounted() {
// Option #1
this.$events.fire('testEvent', this.eventData);
// Option #2
this.$events.emit('testEvent', this.eventData);
// Option #3
this.$events.$emit('testEvent', this.eventData);
}
})
Note: $events.fire
and $events.emit
are aliases for $events.$emit
.
There are 3 methods that register event listeners. They're functionally identical and only differ in name.
new Vue({
mounted() {
// Option #1
this.$events.listen('testEvent', eventData => console.log(eventData));
// Option #1
this.$events.on('testEvent', eventData => console.log(eventData));
// Option #3
this.$events.$on('testEvent', eventData => console.log(eventData));
}
})
Note: $events.listen
and $events.on
are aliases for $events.$on
.
If you'd like to demo vue-events
try vue-stack-2.0