Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cklmercer/vue-events
Simple event handling for Vue.js
https://github.com/cklmercer/vue-events
event-bus events plugin vue vue-events
Last synced: 3 months ago
JSON representation
Simple event handling for Vue.js
- Host: GitHub
- URL: https://github.com/cklmercer/vue-events
- Owner: cklmercer
- License: mit
- Archived: true
- Created: 2016-08-08T14:21:30.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-25T15:44:32.000Z (almost 6 years ago)
- Last Synced: 2024-09-21T06:15:28.004Z (5 months ago)
- Topics: event-bus, events, plugin, vue, vue-events
- Language: JavaScript
- Homepage:
- Size: 43 KB
- Stars: 234
- Watchers: 5
- Forks: 27
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-events - events?style=social) - 简化事件的VueJS插件 (实用库)
- awesome-github-vue - vue-events - 简化事件的VueJS插件 (实用库)
- awesome-github-vue - vue-events - 简化事件的VueJS插件 (实用库)
- awesome - vue-events - 简化事件的VueJS插件 (实用库)
README
# vue-events
A [Vue.js](http://vuejs.org) plugin that simplify events.
Works with both `Vue 1.0` & `Vue 2.0`.
## Installation
##### 1.) Install package via Yarn or NPM
```bash
$ yarn add vue-events
```
---
```bash
$ npm install vue-events
```
##### 2.) Install plugin within project.
```javascript
import Vue from 'vue'
import VueEvents from 'vue-events'
Vue.use(VueEvents)
```
---
```javascript
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](https://vuejs.org/v2/api/#vm-emit)
`vm.$events.emit` | `event, payload` | Emit the event with the given payload. _Alias for `vm.$events.$emit`_ | [vm.$emit](https://vuejs.org/v2/api/#vm-emit)
`vm.$events.fire` | `event, payload` | Emit the event with the given payload. _Alias for `vm.$events.$emit`_ | [vm.$emit](https://vuejs.org/v2/api/#vm-emit)
`vm.$events.$on` | `event, callback` | Listen for the event with the given callback. | [vm.$on](https://vuejs.org/v2/api/#vm-on)
`vm.$events.on` | `event, callback` | Listen for the event with the given callback. _Alias for `vm.$events.$on`_ | [vm.$on](https://vuejs.org/v2/api/#vm-on)
`vm.$events.listen` | `event, callback` | Listen for the event with the given callback. _Alias for `vm.$events.$on`_ | [vm.$on](https://vuejs.org/v2/api/#vm-on)
`vm.$events.$off` | `event, callback` | Remove event listener(s) for the event | [vm.$off](https://vuejs.org/v2/api/#vm-off)
`vm.$events.off` | `event, callback` | Remove event listener(s) for the event. _Alias for `vm.$events.$off`_ | [vm.$off](https://vuejs.org/v2/api/#vm-off)
`vm.$events.remove` | `event, callback` | Remove event listener(s) for the event _Alias for `vm.$events.$off`_ | [vm.$off](https://vuejs.org/v2/api/#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`_
```javascript
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`._
```javascript
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`._
```javascript
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.
```javascript
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:
```javascript
new Vue({
events: {
onShowAlert(message){
this.modalVisible = true
this.message = message
}
}
})
```
## Demo
If you'd like to demo `vue-events` try [vue-mix](https://github.com/cklmercer/vue-mix)
## License
[MIT](http://opensource.org/licenses/MIT)