在 Vue.js中優(yōu)雅地使用全局事件的方法
Vue 2.0 版本中取消了 v1 中的 $broadcast 方法,因此要使用全局事件時(shí),不可避免地會使用到 event-bus 之類的方法,本文旨在提出一種不需要用到 event-bus 的全局事件使用方法。
主要思路是將事件全部綁定在 $root 上,并為所有全局事件添加一個(gè)前綴防止沖突,再通過向 $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 中調(diào)用 mixin
Vue.mixin(require('./event-mixin.js').default)
在各個(gè)組件中,向 $root 發(fā)送事件即可
// 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ū)嵗砑訉S糜|發(fā)方法 } }
使用這種方法,可以避免新建專門用于傳輸事件的 vue 實(shí)例,編寫回調(diào)函數(shù)時(shí)也更容易管理。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue.js一些問題和思考學(xué)習(xí)筆記(1)
這篇文章主要為大家分享了關(guān)于Vue.js一些問題和思考的學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12vite+ts vite.config.ts使用path報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法
最近在一個(gè)vue3項(xiàng)目中遇到了報(bào)錯(cuò),整理了些解決辦法,這篇文章主要給大家介紹了關(guān)于Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05vue點(diǎn)擊按鈕動態(tài)創(chuàng)建與刪除組件功能
這篇文章主要介紹了vue點(diǎn)擊按鈕動態(tài)創(chuàng)建與刪除組件功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12vue-cli3自動消除console.log()的調(diào)試信息方式
這篇文章主要介紹了vue-cli3自動消除console.log()的調(diào)試信息方式,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10