在 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实例，编写回调函数时也更容易管理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。