vue子頁面控制父頁面刷新問題
更新時間：2023年05月24日 15:32:06 作者：Take?Me?Down
這篇文章主要介紹了vue子頁面控制父頁面刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue子頁面控制父頁面刷新
父頁面
?//父組件調(diào)用子組件
<el-dialog :visible.sync="showDialog" width="65%">
? ? ? <version
? ? ? ? v-if="showDialog"
? ? ? ? :versionId="versionId"
? ? ? ? :currentVersion="currentVersion"
? ? ? ? :batchNo="batchNo"
? ? ? ? :showDialog="showDialog"
? ? ? ? :subjectList="subject"
? ? ? ? @on-load = "onLoad"
? ? ? ? @refresh-change="handleRefreshChange"http://調(diào)用方法
? ? ? ></version>
? ? </el-dialog>
methods:{
handleRefreshChange() {
? ? ? this.onLoad(this.page);//調(diào)用父組件的刷新方法
? ? },
}子頁面
//在需要點擊后刷新的位置添加上
this.$emit('refresh-change',true);vue刷新頁面的三種方式，并處理死循環(huán)
vue頁面刷新的辦法和處理頁面重復循環(huán)。先寫一下刷新頁面的方法，解決循環(huán)放在下邊。
1.直接使用刷新當前頁面
會有短暫白屏，體驗效果不好
location.reload();
2.通過路由傳入0，刷新當前頁面
忽悠短暫白屏，體驗效果不好
this.$router.go(0);
3.通過provide / inject組合
這個體驗感是最好的！
第一步：先在App.vue里 給 <router-view> 加一個 if 判斷，通過 $nextTick()實現(xiàn)先移除再添加達到刷新的功能。
<template>
? <div id="app">
? ? <router-view v-if="isRouterAlive"> </router-view>
? </div>
</template>
<script>
export default {
? name: "App",
? data() {
? ? return {
? ? ? isRouterAlive: true,
? ? };
? },
? provide() {
? ? return {
? ? ? reload: this.reload,
? ? };
? },
? methods: {
? ? reload() {
? ? ? this.isRouterAlive = false; //先關(guān)閉，
? ? ? this.$nextTick(function () {
? ? ? ? this.isRouterAlive = true; //再打開
? ? ? });
? ? },
? },
};
</script>第二步：在需要用到刷新的頁面接收 inject:['reload']
export default {
? ? inject:['reload'],?
? ? data () {
? ? ? ? return {}
? ? },第三步：在需要使用到刷新的地方直接調(diào)用
this.reload();
接下來，說下死循環(huán)，這個是因為刷新頁面后，這段代碼又重新執(zhí)行。
想要解決有兩種方法
1.在想要刷新的地方使用點擊事件，這樣只有在點擊的時候會觸發(fā)這個刷新事件
<template>
? <div>
? ? <button @click="cli"></button>
? </div>
</template>
<script>
export default {
? name: "1",
? methods: {
? ? cli() {
? ? ? this.$router.go(0); //我這里隨便用一種刷新的方法
? ? },
? },
};
</script>
<style scoped>
</style>2.這種方法，使用定時器的辦法，不通過手動點擊，自動觸發(fā)
<template>
? <div></div>
</template>
<script>
export default {
? name: "1",
? mounted() {
? ? setInterval(() => {
? ? ? this.$router.go(0); //我這里隨便用一種刷新的方法
? ? }, 300000); //每5分鐘自動調(diào)用一次
? },
};
</script>
<style scoped>
</style>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vuetify實現(xiàn)全局v-alert消息通知的方法
使用強大的Vuetify開發(fā)前端頁面,結(jié)果發(fā)現(xiàn)官方?jīng)]有提供簡便的全局消息通知組件,所以自己動手寫了一個簡單的組件,接下來通過本文給大家介紹使用vuetify實現(xiàn)全局v-alert消息通知的詳細代碼,感興趣的朋友跟隨小編一起看看吧2024-02-02
本篇文章主要介紹了基于vue實現(xiàn)swipe輪播組件實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
組件是Vue核心功能之一,合理的組件化,可以減少我們代碼的冗余,提高項目的可維護性,下面這篇文章主要給大家介紹了關(guān)于Vue中父子組件通信與事件觸發(fā)的相關(guān)資料,需要的朋友可以參考下2022-03-03
文章介紹了在使用Vite進行代理時,如何解決多次設(shè)置Access-Control-Allow-Origin導致的跨域問題,通過在Vite的代理服務(wù)中重寫響應頭,可以有效解決問題,同時,也提到了使用Express和http-proxy-middleware的另一種解決方案2025-12-12
今天小編就為大家分享一篇解決vuecli3.0熱更新失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了在vue項目如何使用base64加密，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
基于Vue2實現(xiàn)簡易的省市區(qū)縣三級聯(lián)動組件效果
這是一個基于Vue2的簡易省市區(qū)縣三級聯(lián)動組件，可以控制只顯示省級或只顯示省市兩級，可設(shè)置默認值等。提供原始省市縣代碼和名稱數(shù)據(jù)，適用于各種有關(guān)城市區(qū)縣的應用。需要的朋友可以參考下2018-11-11
Volar 與vetur相同,volar是一個針對vue的vscode插件,下面這篇文章主要給大家介紹了關(guān)于Vue3格式化Volar報錯的原因分析與解決方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-06-06
淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑
這篇文章主要介紹了淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
回到頂部在很多網(wǎng)頁中都可以見到，本文主要介紹了Vue3 封裝回到頂部組件的實現(xiàn)示例，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03