vue的keep-alive中如何使用EventBus-創(chuàng)新互聯(lián)

這篇文章主要介紹了vue的keep-alive中如何使用EventBus，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元梅江做網(wǎng)站,已為上家服務(wù),為梅江各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

1.keep-alive組件

keep-alive是Vue提供的一個(gè)抽象組件，用來(lái)對(duì)組件進(jìn)行緩存，從而節(jié)省性能，由于是一個(gè)抽象組件，所以在頁(yè)面渲染完畢后不會(huì)被渲染成一個(gè)DOM元素。但是對(duì)于展示型頁(yè)面比較好用，表單類頁(yè)面也會(huì)將所填數(shù)據(jù)保存起來(lái)，對(duì)于那種表單沒(méi)提交又需要保存所填數(shù)據(jù)的場(chǎng)景非常實(shí)用。

keep-alive所緩存的頁(yè)面只會(huì)執(zhí)行一次created和mounted，也就是在第一次進(jìn)入才會(huì)執(zhí)行。但是又會(huì)多兩個(gè)生命周期，分別是activated、deactivated，activated在每次進(jìn)入執(zhí)行而deactivated在每次離開(kāi)前執(zhí)行。 當(dāng)然有些頁(yè)面不需要緩存，就要進(jìn)行一些處理，這里就不多講了，因?yàn)楣烙?jì)大家都知道(不知道百度去...)。

2.EventBus(事件總線)

EventBus用于實(shí)現(xiàn)組件之間的數(shù)據(jù)通訊，使用起來(lái)非常之簡(jiǎn)單。只需要在main.js中加入以下代碼：

Vue.prototype.$eventBus = new Vue();

上面代碼就創(chuàng)建了一個(gè)全局EventBus，其實(shí)就是一個(gè)vue實(shí)例。

這樣我們就可以在各個(gè)頁(yè)面中使用了。

在頁(yè)面中使用 $emit 方法就可以觸發(fā)事件,然后組件中使用 $on 方法就可以監(jiān)聽(tīng)對(duì)應(yīng)事件,這個(gè)和組件之間傳值是一樣的。不過(guò)這個(gè)可以在非父子組件中傳遞狀態(tài),和vuex差不多。當(dāng)然這種方法在簡(jiǎn)單應(yīng)用中可以使用，復(fù)雜的應(yīng)用應(yīng)該使用 vuex ，這樣方便管理和維護(hù)。

this.$eventBus.$emit('msg',data);// 觸發(fā)事件
this.$eventBus.$on('msg',(data)=>{}) // 監(jiān)聽(tīng)事件

3.組合使用

這兩個(gè)我感覺(jué)很配，當(dāng)我們使用keep-alive緩存了頁(yè)面組件，我們需要在A面來(lái)觸發(fā)B頁(yè)面的列表刷新或其他方法時(shí)，這時(shí)候使用EventBus就非常方便，其他方法也可以，比如說(shuō)使用vuex，但是此時(shí)就沒(méi)有直接使用EventBus方便快捷了。 當(dāng)我們?cè)陧?yè)面中使用了 this.$eventBus.$on 去監(jiān)聽(tīng)一個(gè)事件，只要頁(yè)面被緩存，就可以監(jiān)聽(tīng)到其他頁(yè)面觸發(fā)的事件。這樣我們就可以減少一些不必要的請(qǐng)求，而且在需要更新的時(shí)候去更新，也可以做一些其他的操作，簡(jiǎn)直美滋滋。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue的keep-alive中如何使用EventBus”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

本文名稱：vue的keep-alive中如何使用EventBus-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL：http://muchs.cn/article24/hcgce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、靜態(tài)網(wǎng)站、域名注冊(cè)、微信公眾號(hào)、外貿(mào)網(wǎng)站建設(shè)、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)