vue項(xiàng)目如何刷新當(dāng)前頁(yè)面的方法
1.場(chǎng)景
在處理列表時(shí)，常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當(dāng)前頁(yè)面的需求。
2.遇到的問(wèn)題
1. 用vue-router重新路由到當(dāng)前頁(yè)面，頁(yè)面是不進(jìn)行刷新的
2.采用window.reload()，或者router.go(0)刷新時(shí)，整個(gè)瀏覽器進(jìn)行了重新加載，閃爍，體驗(yàn)不好
3.解決方法
provide / inject組合
作用：允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。
App.vue:
聲明reload方法，控制router-view的顯示或隱藏，從而控制頁(yè)面的再次加載
tableList.vue:
在頁(yè)面注入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加...）,直接this.reload()調(diào)用，即可刷新當(dāng)前頁(yè)面。
4.provide / inject 用法
provide：選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的屬性。
inject：一個(gè)字符串?dāng)?shù)組，或一個(gè)對(duì)象，對(duì)象的 key 是本地的綁定名
提示：provide和inject綁定并不是可響應(yīng)的。這是刻意為之的。如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的七種方法總結(jié)
- vue.js實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的方法教程
- Vue實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的三種方式總結(jié)
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法舉例
- vue.js刷新當(dāng)前頁(yè)面的實(shí)例講解
- Vue.js刷新當(dāng)前頁(yè)面的常見(jiàn)方法
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的五種方法總結(jié)
相關(guān)文章
本文主要探討了 Vue 3 中父子組件之間的通信方式,包括父?jìng)髯?通過(guò)props傳遞數(shù)據(jù)和方法；子傳父,用emit觸發(fā)自定義事件并傳遞數(shù)據(jù)；還介紹了使用ref直接操作子組件實(shí)例,借助defineExpose暴露子組件的屬性和方法給父組件,需要的朋友可以參考下2025-01-01
使用echarts柱狀圖實(shí)現(xiàn)select下拉刷新數(shù)據(jù)
這篇文章主要介紹了使用echarts柱狀圖實(shí)現(xiàn)select下拉刷新數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue自定義全局組件(自定義插件)的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
淺談vuex的基本用法和mapaction傳值問(wèn)題
今天小編就為大家分享一篇淺談vuex的基本用法和mapaction傳值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
element-ui?table表格底部合計(jì)自定義配置過(guò)程
這篇文章主要介紹了element-ui?table表格底部合計(jì)自定義配置過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
關(guān)于vue.js中this.$emit的理解使用
本文主要介紹了關(guān)于vue.js中this.$emit的理解使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
關(guān)于vue中輸入框的使用場(chǎng)景總結(jié)
這篇文章主要介紹了關(guān)于vue中輸入框的使用場(chǎng)景總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了簡(jiǎn)述vue狀態(tài)管理模式之vuex，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
關(guān)于Vue新搭檔TypeScript快速入門實(shí)踐
這篇文章主要介紹了關(guān)于Vue新搭檔TypeScript快速入門實(shí)踐，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能詳解
這篇文章主要介紹了Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)C#有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12