?

1.場景

在處理列表時(shí)，常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當(dāng)前頁面的需求。

2.遇到的問題

1. 用vue-router重新路由到當(dāng)前頁面，頁面是不進(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的顯示或隱藏，從而控制頁面的再次加載

?

tableList.vue:

在頁面注入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加...）,直接this.reload()調(diào)用，即可刷新當(dāng)前頁面。

?

4.provide / inject 用法

provide：選項(xiàng)應(yīng)該是一個(gè)對象或返回一個(gè)對象的函數(shù)。該對象包含可注入其子孫的屬性。

inject：一個(gè)字符串?dāng)?shù)組，或一個(gè)對象，對象的 key 是本地的綁定名

提示：provide?和?inject?綁定并不是可響應(yīng)的。這是刻意為之的。如果你傳入了一個(gè)可監(jiān)聽的對象，那么其對象的屬性還是可響應(yīng)的。

?

==========================================

深入理解數(shù)據(jù)驅(qū)動(dòng)

以上算是開發(fā)過程中的一個(gè)坑，用了一段時(shí)間，今天再讀代碼的時(shí)候，感覺被坑的很嚴(yán)重。

1. 獲取列表方法

2.重新獲取數(shù)據(jù)

3.這樣再次調(diào)用獲取數(shù)據(jù)，即可同步實(shí)現(xiàn)頁面數(shù)據(jù)更新（不會(huì)重新刷新頁面），同時(shí)保證有分頁時(shí)，能夠停留在當(dāng)前頁（刷新前如果是第二頁，刷新后依然在第二頁），

即其他查詢條件保持不變，體驗(yàn)效果好

總結(jié)

以上是生活随笔為你收集整理的工作192:vue项目如何刷新当前页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。