在 Vue.js中優(yōu)雅地使用全局事件的方法
更新時(shí)間：2019年02月01日 08:16:44 作者：全棧工程師的自我修養(yǎng)
這篇文章主要介紹了在 Vue.js中優(yōu)雅地使用全局事件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
Vue 2.0 版本中取消了 v1 中的 $broadcast 方法，因此要使用全局事件時(shí)，不可避免地會(huì)使用到 event-bus 之類的方法，本文旨在提出一種不需要用到 event-bus 的全局事件使用方法。
主要思路是將事件全部綁定在 $root 上，并為所有全局事件添加一個(gè)前綴防止沖突，再通過(guò)向 $options 上注入新的 key 來(lái)簡(jiǎn)化使用方式。
以下為 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ū)嵗砑訉Ｓ糜|發(fā)方法
}
}
使用這種方法，可以避免新建專門用于傳輸事件的 vue 實(shí)例，編寫回調(diào)函數(shù)時(shí)也更容易管理。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能實(shí)例
最近做項(xiàng)目有用到某個(gè)div顯示與隱藏內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
本篇文章主要介紹了詳解axios在vue中的簡(jiǎn)單配置與使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
這篇文章主要為大家詳細(xì)介紹了Vue.js數(shù)據(jù)綁定之data屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue中require與import的區(qū)別詳解,require相當(dāng)于module.exports的傳送門,module.exports后面的內(nèi)容是什么,require的結(jié)果就是什么,對(duì)象、數(shù)字、字符串、函數(shù),再把require的結(jié)果賦值給某個(gè)變量,需要的朋友可以參考下2023-10-10
Vue使用axios引起的后臺(tái)session不同操作
這篇文章主要介紹了Vue使用axios引起的后臺(tái)session不同操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了淺談vue 多個(gè)變量同時(shí)賦相同值互相影響，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
詳解vite2.0配置學(xué)習(xí)(typescript版本)
這篇文章主要介紹了詳解vite2.0配置學(xué)習(xí)(typescript版本)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
最近在研究uni-app跨端開(kāi)發(fā)APP和H5的通訊和交互,比如H5調(diào)用APP的方法,APP往H5里面?zhèn)鲄?H5往app外面?zhèn)鲄?這篇文章主要給大家介紹了關(guān)于uniapp?webview和H5通信的3種方式,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue實(shí)現(xiàn)虛擬化列表封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06