这篇文章给大家介绍怎么在Vue.js中使用全局事件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的大邑县网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
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.js中使用全局事件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
