这篇文章主要介绍了在 Vue.js中优雅地使用全局事件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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 defa<p style="color:transparent">本文来源gao!daima.com搞$代!码网</p>ult { 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 实例，编写回调函数时也更容易管理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是在 Vue.js中优雅地使用全局事件的方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：在 Vue.js中优雅地使用全局事件的方法
转载请注明原文链接：在 Vue.js中优雅地使用全局事件的方法
