在 Vue.js 中优雅地使用全局事件
栏目: JavaScript · 发布时间: 5年前
Vue 2.0 版本中取消了 v1 中的 $broadcast 方法,因此要使用全局事件时,不可避免地会使用到 event-bus 之类的方法,本文旨在提出一种不需要用到 event-bus 的全局事件使用方法。
主要思路是将事件全部绑定在 $root 上,并为所有全局事件添加一个前缀防止冲突,再通过向 $options 上注入新的 key 来简化使用方式。
以下为 mixin 文件代码
// event-mixin.js
export default {
created() {
if (this.$options.events) {
Object.keys(this.$options.events).forEach(key => {
let handler = this.$options.events[key]
if (typeof handler === '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
export default {
name: 'a',
events: {
'evt.a': 'handlerA',
'evt.b'() {
console.log('B triggered')
}
},
methods: {
handlerA() {
console.log('A triggered')
}
}
}
// b.vue
export default {
name: 'b',
events: {
'evt.b'() {
console.log('B triggered again')
}
}
}
// c.vue
export default {
name: 'c',
created() {
this.$root.$emit('global::evt.a') // 'A triggered'
this.$root.$emit('global::evt.b', 'data') // 'B triggered', 'B triggered again'
// 使用以上方式触发,也可以在 mixin 中向实例添加专用触发方法
}
}
使用这种方法,可以避免新建专门用于传输事件的 vue 实例,编写回调函数时也更容易管理。
以上。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Node.js基础 23456:全局对象,回调函数,模块,事件,读写文件(同步,异步)
- 全局变量,静态全局变量,局部变量,静态局部变量
- Thrift RPC 系列教程(2)——全局变量&全局常量
- 全局角度出发讨论敏捷
- 全局事务锁等待分析
- 避免全局变量
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。