vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例
1.場景
在處理列表時，常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當前頁面的需求。
2.遇到的問題
1. 用vue-router重新路由到當前頁面，頁面是不進行刷新的
2.采用window.reload()，或者router.go(0)刷新時，整個瀏覽器進行了重新加載，閃爍，體驗不好
3.解決方法
provide / inject 組合
作用：允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時間里始終生效。
App.vue:
聲明reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次加載
tableList.vue:
在頁面注入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加...）,直接this.reload()調(diào)用，即可刷新當前頁面。
4.provide / inject 用法
provide：選項應該是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的屬性。
inject：一個字符串數(shù)組，或一個對象，對象的 key 是本地的綁定名
提示：provide 和 inject 綁定并不是可響應的。這是刻意為之的。如果你傳入了一個可監(jiān)聽的對象，那么其對象的屬性還是可響應的。
==========================================
深入理解數(shù)據(jù)驅(qū)動
以上算是開發(fā)過程中的一個坑，用了一段時間，今天再讀代碼的時候，感覺被坑的很嚴重。
1. 獲取列表方法
2.重新獲取數(shù)據(jù)
3.這樣再次調(diào)用獲取數(shù)據(jù)，即可同步實現(xiàn)頁面數(shù)據(jù)更新（不會重新刷新頁面），同時保證有分頁時，能夠停留在當前頁（刷新前如果是第二頁，刷新后依然在第二頁），
即其他查詢條件保持不變，體驗效果好。
以上這篇vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue和Firebase實現(xiàn)后臺數(shù)據(jù)存儲的示例代碼
在現(xiàn)代 web 應用開發(fā)中,前端和后端的無縫協(xié)作至關(guān)重要,借助 Firebase 等云計算解決方案,前端開發(fā)者可以輕松實現(xiàn)數(shù)據(jù)存儲與實時更新,本文將為大家詳細介紹如何利用 Vue 3 的 Composition API 和 Firebase 實現(xiàn)后臺數(shù)據(jù)存儲,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue實現(xiàn)跨域的方法,結(jié)合實例形式分析了vue.js跨域的原理與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
詳解vue-router的Import異步加載模塊問題的解決方案
這篇文章主要介紹了詳解vue-router的Import異步加載模塊問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
本文主要介紹了el-menu使用遞歸組件實現(xiàn)多級菜單組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Dialog通常是指在Vue.js 3.x版本中使用的對話框組件,它是一個輕量級、易集成的彈窗插件,用于創(chuàng)建通知、確認消息、輸入表單等交互場景,最近項目中遇到了全局掛載Dialog的需求,所以本文給大家介紹了Vue3全局掛載Dialog組件的方法,需要的朋友可以參考下2024-12-12
vue使用ajax獲取后臺數(shù)據(jù)進行顯示的示例
今天小編就為大家分享一篇vue使用ajax獲取后臺數(shù)據(jù)進行顯示的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue+element實現(xiàn)輸入密碼鎖屏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
雙向數(shù)據(jù)綁定原理主要運用了發(fā)布訂閱模式來實現(xiàn)的，通過Object.defineProperty對數(shù)據(jù)劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下2023-02-02
本文主要介紹了vue前端RSA加密java后端解密的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02