vue中實(shí)現(xiàn)頁面刷新以及局部刷新的方法
一.全頁面刷新
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>
重點(diǎn)如下圖所示：
2.到需要刷新的頁面使用 inject 進(jìn)行導(dǎo)入并引用 reload：
3.在需要進(jìn)行調(diào)用的方法中調(diào)用 this.reload() 即可
二、局部刷新
1.定義一個(gè)變量 isReloadData，并將該變量綁定到需要刷新的標(biāo)簽上 ：
2.定義局部刷新的方法 reloadPart：
3.在需要執(zhí)行局部刷新的方法中進(jìn)行調(diào)用
三、應(yīng)用場景
- 當(dāng)在頁面中動(dòng)態(tài)修改了某些數(shù)據(jù)，或者是 props 帶過來的數(shù)據(jù)，又或者是通過 funcation 動(dòng)態(tài)設(shè)置的屬性，可能在修改之后不會(huì)展示最新的數(shù)據(jù)。
- 當(dāng)頁面數(shù)據(jù)發(fā)生了變化，但是頁面渲染會(huì)出現(xiàn)bug，例如 el-table 組件在數(shù)據(jù)發(fā)生變化后，會(huì)出現(xiàn)一個(gè)空白區(qū)域。
此時(shí)，全頁面刷新或者局部刷新就會(huì)派上用場，下面截圖舉例本人遇到的第二種情況，已通過使用全頁面刷新及局部刷新解決：
1.默認(rèn)全選，頁面渲染正常：
2.勾選掉一個(gè)展示列，頁面渲染正常：
3.把勾選掉的展示列再勾選上，出現(xiàn)空白區(qū)域：
此時(shí)，只需要在單選的方法中調(diào)用局部刷新的方法 this.reloadPart() 即可解決，同理，全選也是如此。
4.當(dāng)每次新增展示列時(shí)，表格也會(huì)出現(xiàn)空白區(qū)域，此時(shí)我們只需要在新增記錄成功后調(diào)用全頁面刷新的方法 this.reload() 即可。
總結(jié)
到此這篇關(guān)于vue中實(shí)現(xiàn)頁面刷新以及局部刷新的文章就介紹到這了,更多相關(guān)vue頁面刷新及局部刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vuex+axios+element-ui實(shí)現(xiàn)頁面請求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實(shí)現(xiàn)頁面請求loading操作,結(jié)合實(shí)例形式分析了vuex+axios+element-ui實(shí)現(xiàn)頁面請求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue組件props屬性監(jiān)聽不到值變化問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解
這篇文章主要為大家介紹了Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Element Notification通知的實(shí)現(xiàn)示例
這篇文章主要介紹了Element Notification通知的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue.js-div滾動(dòng)條隱藏但有滾動(dòng)效果的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue.js-div滾動(dòng)條隱藏但有滾動(dòng)效果的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue如何查找數(shù)組中符合條件的對象，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue2.0中三種常用傳值方式(父傳子、子傳父、非父子組件傳值)
在Vue的框架開發(fā)的項(xiàng)目過程中，經(jīng)常會(huì)用到組件來管理不同的功能，有一些公共的組件會(huì)被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父傳子、子傳父、非父子組件傳值，需要的朋友參考下吧2018-08-08
Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題
這篇文章主要介紹了Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題,主要針對是登錄操作，我們?yōu)榱送瓿蒘SO(Single Sign On)的效果，認(rèn)證和授權(quán)在UC完成，用戶發(fā)起資源請求，服務(wù)網(wǎng)關(guān)會(huì)進(jìn)行過濾，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹vue3中?provide?和?inject?用法及原理，provide?和?inject可以?解決多次組件傳遞數(shù)據(jù)的問題，下面文章是具體的用法和實(shí)現(xiàn)原理,具有一定的參考價(jià)值，需要的朋友可以參考一下，希望對大家有所幫助2021-11-11