vue暴露的全局方法_在 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 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 实例,编写回调函数时也更容易管理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页