在 Vue.js中優(yōu)雅地使用全局事件的方法

// 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'])
 })
 }
 }
}

// 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'
 // 使用以上方式觸發(fā)，也可以在 mixin 中向?qū)嵗砑訉?zhuān)用觸發(fā)方法
 }
}