在 Vue.js中优雅地使用全局事件的方法
Vue2.0版本中取消了v1中的$broadcast方法,因此要使用全局事件时,不可避免地会使用到event-bus之类的方法,本文旨在提出一种不需要用到event-bus的全局事件使用方法。
主要思路是将事件全部绑定在$root上,并为所有全局事件添加一个前缀防止冲突,再通过向$options上注入新的key来简化使用方式。
以下为mixin文件代码
//event-mixin.js exportdefault{ created(){ if(this.$options.events){ Object.keys(this.$options.events).forEach(key=>{ lethandler=this.$options.events[key] if(typeofhandler==='string'){ handler=this[handler] } this[key+'::handler']=handler.bind(this) this.$root.$on('global::'+key,this[key+'::handler']) }) } }, beforeDestroy(){ if(this.$options.events){ Object.keys(this.$options.events).forEach(key=>{ this.$root.$off('global::'+key,this[key+'::handler']) }) } } }
使用前先在main.js中调用mixin
Vue.mixin(require('./event-mixin.js').default)
在各个组件中,向$root发送事件即可
//a.vue exportdefault{ name:'a', events:{ 'evt.a':'handlerA', 'evt.b'(){ console.log('Btriggered') } }, methods:{ handlerA(){ console.log('Atriggered') } } }
//b.vue exportdefault{ name:'b', events:{ 'evt.b'(){ console.log('Btriggeredagain') } } }
//c.vue exportdefault{ name:'c', created(){ this.$root.$emit('global::evt.a')//'Atriggered' this.$root.$emit('global::evt.b','data')//'Btriggered','Btriggeredagain' //使用以上方式触发,也可以在mixin中向实例添加专用触发方法 } }
使用这种方法,可以避免新建专门用于传输事件的vue实例,编写回调函数时也更容易管理。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。