vue中實現(xiàn)頁面刷新以及局部刷新的方法
更新時間：2022年01月06日 10:14:54 作者：巨蟹座不吃魚
這篇文章主要給大家介紹了關(guān)于vue中實現(xiàn)頁面刷新以及局部刷新的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
一.全頁面刷新
1.修改 App.vue，代碼如下：
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: 'App',
provide() { // 父組件中返回要傳給下級的數(shù)據(jù)
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
}
</script>
重點如下圖所示：
2.到需要刷新的頁面使用 inject 進行導(dǎo)入并引用 reload：
3.在需要進行調(diào)用的方法中調(diào)用 this.reload() 即可
二、局部刷新
1.定義一個變量 isReloadData，并將該變量綁定到需要刷新的標簽上 ：
2.定義局部刷新的方法 reloadPart：
3.在需要執(zhí)行局部刷新的方法中進行調(diào)用
三、應(yīng)用場景
- 當(dāng)在頁面中動態(tài)修改了某些數(shù)據(jù)，或者是 props 帶過來的數(shù)據(jù)，又或者是通過 funcation 動態(tài)設(shè)置的屬性，可能在修改之后不會展示最新的數(shù)據(jù)。
- 當(dāng)頁面數(shù)據(jù)發(fā)生了變化，但是頁面渲染會出現(xiàn)bug，例如 el-table 組件在數(shù)據(jù)發(fā)生變化后，會出現(xiàn)一個空白區(qū)域。
此時，全頁面刷新或者局部刷新就會派上用場，下面截圖舉例本人遇到的第二種情況，已通過使用全頁面刷新及局部刷新解決：
1.默認全選，頁面渲染正常：
2.勾選掉一個展示列，頁面渲染正常：
3.把勾選掉的展示列再勾選上，出現(xiàn)空白區(qū)域：
此時，只需要在單選的方法中調(diào)用局部刷新的方法 this.reloadPart() 即可解決，同理，全選也是如此。
4.當(dāng)每次新增展示列時，表格也會出現(xiàn)空白區(qū)域，此時我們只需要在新增記錄成功后調(diào)用全頁面刷新的方法 this.reload() 即可。
總結(jié)
到此這篇關(guān)于vue中實現(xiàn)頁面刷新以及局部刷新的文章就介紹到這了,更多相關(guān)vue頁面刷新及局部刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
序號算是在展示數(shù)據(jù)的時候，一種很普遍的屬性了，我們可以自己寫生成序號的規(guī)則，也可以借助第三方，這篇文章主要介紹了Vue使用Element-UI生成并展示表頭序號的方法,需要的朋友可以參考下2023-01-01
Vue3+Vite+TS使用elementPlus時踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時踩的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了vue中七牛插件使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章通過實例代碼給大家介紹了vue項目中添加electron的方法，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
這篇文章主要給大家介紹了關(guān)于vue圖片懶加載代碼實現(xiàn)的相關(guān)資料,所謂圖片懶加載是指當(dāng)我們?yōu)g覽頁面時,只加載我們?yōu)g覽器可視區(qū)的圖片,向下滾動時再繼續(xù)加載后面的圖片,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了Vue如何利用高德地圖API實現(xiàn)實時天氣,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
vue路由history模式頁面刷新404解決方法Koa?Express
這篇文章主要為大家介紹了vue路由history模式頁面刷新404解決方法（Koa?Express）詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
ElementUI Tag組件實現(xiàn)多標簽生成的方法示例
這篇文章主要介紹了ElementUI Tag組件實現(xiàn)多標簽生成的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了使用vue實現(xiàn)手寫簽名功能,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-07-07
在vue項目開發(fā)中,我們會將經(jīng)常用到的邏輯或模塊抽象成組件,對于那些多個項目都有用到的組件,可以考慮封裝成組件庫,這篇文章主要給大家介紹了關(guān)于webpack如何打包一個按需引入的vue組件庫的相關(guān)資料,需要的朋友可以參考下2022-02-02