vue的keep-alive中使用EventBus的方法
最近項目中由于列表居多且都做了下拉刷新上拉加載,所以就使用了keep-alive組
件來緩存頁面數據,但是當在其他頁面做一些操作改變了列表數據,當來到列表的時候每次都要下拉刷新一下,體驗不好,所以就使用到了EventBus,在需要更新的時候就用EventBus來刷新列表。
1.keep-alive組件
keep-alive是Vue提供的一個抽象組件,用來對組件進行緩存,從而節(jié)省性能,由于是一個抽象組件,所以在頁面渲染完畢后不會被渲染成一個DOM元素。但是對于展示型頁面比較好用,表單類頁面也會將所填數據保存起來,對于那種表單沒提交又需要保存所填數據的場景非常實用。
keep-alive所緩存的頁面只會執(zhí)行一次created和mounted,也就是在第一次進入才會執(zhí)行。但是又會多兩個生命周期,分別是activated、deactivated,activated在每次進入執(zhí)行而deactivated在每次離開前執(zhí)行。 當然有些頁面不需要緩存,就要進行一些處理,這里就不多講了,因為估計大家都知道(不知道百度去...)。
2.EventBus(事件總線)
EventBus用于實現組件之間的數據通訊,使用起來非常之簡單。只需要在main.js中加入以下代碼:
Vue.prototype.$eventBus = new Vue();
上面代碼就創(chuàng)建了一個全局EventBus,其實就是一個vue實例。
這樣我們就可以在各個頁面中使用了。
在頁面中使用 $emit 方法就可以觸發(fā)事件,然后組件中使用 $on 方法就可以監(jiān)聽對應事件,這個和組件之間傳值是一樣的。不過這個可以在非父子組件中傳遞狀態(tài),和vuex差不多。當然這種方法在簡單應用中可以使用,復雜的應用應該使用 vuex ,這樣方便管理和維護。
this.$eventBus.$emit('msg',data);// 觸發(fā)事件 this.$eventBus.$on('msg',(data)=>{}) // 監(jiān)聽事件
3.組合使用
這兩個我感覺很配,當我們使用keep-alive
緩存了頁面組件,我們需要在A面來觸發(fā)B頁面的列表刷新或其他方法時,這時候使用EventBus就非常方便,其他方法也可以,比如說使用vuex,但是此時就沒有直接使用EventBus方便快捷了。 當我們在頁面中使用了 this.$eventBus.$on
去監(jiān)聽一個事件,只要頁面被緩存,就可以監(jiān)聽到其他頁面觸發(fā)的事件。這樣我們就可以減少一些不必要的請求,而且在需要更新的時候去更新,也可以做一些其他的操作,簡直美滋滋。
總結
以上所述是小編給大家介紹的vue的keep-alive中使用EventBus的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
相關文章
vue項目使用jszip和file-saver批量打包壓縮圖片或附件方式
這篇文章主要介紹了vue項目使用jszip和file-saver批量打包壓縮圖片或附件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03Vue中的無限加載vue-infinite-loading的方法
本篇文章主要介紹了Vue中的無限加載vue-infinite-loading的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04