Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sandeepk01/vue-event-handler
Event handling plugin for VueJS
https://github.com/sandeepk01/vue-event-handler
event-handlers event-listener eventbus vue vue1-events vue2-events
Last synced: about 2 months ago
JSON representation
Event handling plugin for VueJS
- Host: GitHub
- URL: https://github.com/sandeepk01/vue-event-handler
- Owner: sandeepk01
- License: mit
- Created: 2017-01-22T12:25:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-07T04:05:35.000Z (over 5 years ago)
- Last Synced: 2024-07-04T01:32:15.605Z (3 months ago)
- Topics: event-handlers, event-listener, eventbus, vue, vue1-events, vue2-events
- Language: JavaScript
- Homepage:
- Size: 8.79 KB
- Stars: 15
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A [Vue.js](http://vuejs.org) plugin that provides a global event bus and a couple helper methods.
Works with both `Vue 1.0` & `Vue 2.0`.
## Installation
##### 1.) Install package via NPM
```
npm install vue-event-handler
```##### 2.) Install plugin within project.
```
import Vue from 'vue';
import VueEvents from 'vue-event-handler';Vue.use(VueEvents)
```or
```
window.Vue = require('vue');
require('vue-event-handler');
```## Usage
#### The `$events` prototype object.
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. An event when registered becomes globally available and thus
can be handy while passing data between components.#### Registering an event
There are a couple of methods that can be used to register an event and attach a handler method.
Option 1 & 2 are functionally identical, and so is Option 3 & 4.
```
new Vue({mounted () {
// Option 1 - Keeps listening until destroyed
this.$events.listen('eventName', eventData => console.log(eventData));
// Option 2 - Keeps listening until destroyed
this.$events.on('eventName', eventData => console.log(eventData));
// Option 3 - Listens only once and then stops responding to the trigger, but is not destroyed
this.$events.listenOnce('eventName', eventData => console.log(eventData));
// Option 4 - Listens only once and then stops responding to the trigger, but is not destroyed
this.$events.once('eventName', eventData => console.log(eventData));
}
})
```#### Firing an event
There are 2 methods that fire events. Both options are functionally identical.```
new Vue({data() {
return {
eventData: {
foo: 'baz'
}
}
},
mounted() {
// Option 1
this.$events.fire('eventName', this.eventData);
// Option 2
this.$events.emit('eventName', this.eventData);
}
})
```#### Destroying an event
There is a method to de-register/destroy an event listener. These method becomes handy whenever the scope of a Vue component
is lost and the event was being used locally.```
new Vue({beforeDestroy () {
// Option 1 - Destroys an event
this.$events.off('eventName');
// Option 2 - Destroys an event
this.$events.unlisten('eventName');
// Option 3 - Destroys all event listeners globally
this.$events.removeAll();
}
})
```## License
[MIT](http://opensource.org/licenses/MIT)