A Vue.js plugin that simplify events.
Works with both Vue 1.0 & Vue 2.0.
$ yarn add vue-events$ npm install vue-eventsimport 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent