vue eventbus
Posted kissfu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue eventbus相关的知识,希望对你有一定的参考价值。
这个集中式的事件中间件就是 Bus。我习惯将bus定义到全局:
app.js
var eventBus = {
install(Vue,options) {
Vue.prototype.$bus = vue
}
};
Vue.use(eventBus);
然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件:
分发事件的组件
// ...
methods: {
todo: function () {
this.$bus.$emit(‘todoSth‘, params); //params是传递的参数
//...
}
}
监听的组件
// ...
created() {
this.$bus.$on(‘todoSth‘, (params) => { //获取传递的参数并进行操作
//todo something
})
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
this.$bus.$off(‘todoSth‘);
},
如果需要监听多个组件,只需要更改 bus 的 eventName:
// ...
created() {
this.$bus.$on(‘firstTodo‘, this.firstTodo);
this.$bus.$on(‘secondTodo‘, this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
this.$bus.$off(‘firstTodo‘, this.firstTodo);
this.$bus.$off(‘secondTodo‘, this.secondTodo);
},
以上是关于vue eventbus的主要内容,如果未能解决你的问题,请参考以下文章