vue-events
vue-events copied to clipboard
cklmercer
Simple event handling for Vue.js
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
cklmercer