@dyw/vue-bus
v0.0.1
Published
A event bus for Vue.js
Downloads
5
Readme
@dyw/vue-bus
A event bus for Vue.js, support both Vue 1.0 and 2.0. See Vue documentation for more detail.
Installation
You can install it via yarn or npm.
$ yarn add @dyw/vue-bus
$ npm install @dyw/vue-bus --save
When used with a module system, you must explicitly install the bus via Vue.use():
import Vue from 'vue';
import VueBus from '@dyw/vue-bus';
Vue.use(VueBus);
You don't need to do this when using global script tags.
Usage
自动在beforeDestroy的时候off,防止内存泄漏
在on和once的时候传入this即可,为了防止内存泄漏,如果用了ts,如果不需要自动off会要求传false
// ...
created() {
this.$bus.on('add-todo', this.addTodo, this);
this.$bus.once('once', () => console.log('This listener will only fire once'), this);
},
methods: {
addTodo(newTodo) {
this.todos.push(newTodo);
}
}
Listen and clean
// ...
created() {
this.$bus.on('add-todo', this.addTodo, false);
this.$bus.once('once', () => console.log('This listener will only fire once'), false);
},
beforeDestroy() {
this.$bus.off('add-todo', this.addTodo);
},
methods: {
addTodo(newTodo) {
this.todos.push(newTodo);
}
}
Trigger
// ...
methods: {
addTodo() {
this.$bus.emit('add-todo', { text: this.newTodoText });
this.$bus.emit('once');
this.newTodoText = '';
}
}
Another way to use vue-bus
// xxx.js
import Vue from 'vue';
import VueBus from '@dyw/vue-bus';
Vue.use(VueBus);
Vue.bus.emit('someEvent');
Note: on
once
off
emit
are aliases for $on
$once
$off
$emit
. See the API for more detail.