Vue 2.0 版本中取消了 v1 中的 $broadcast 方法，因此要使用全局事件時，不可避免地會使用到 event-bus 之類的方法，本文旨在提出一種不需要用到 event-bus 的全局事件使用方法。
主要思路是將事件全部綁定在 $root 上，并為所有全局事件添加一個前綴防止沖突，再通過向 $options 上注入新的 key 來簡化使用方式。
以下為 mixin 文件代碼
// event-mixin.jsexport 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.vueexport default { name: 'a', events: { 'evt.a': 'handlerA', 'evt.b'() { console.log('B triggered') } }, methods: { handlerA() { console.log('A triggered') } }}// b.vueexport default { name: 'b', events: { 'evt.b'() { console.log('B triggered again') } }}// c.vueexport 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 實例，編寫回調函數時也更容易管理。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
