快捷導(dǎo)航

vue子頁面控制父頁面刷新問題

更新時(shí)間：2023年05月24日 15:32:06 作者：Take?Me?Down

這篇文章主要介紹了vue子頁面控制父頁面刷新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)用父組件的刷新方法
? ? },
}

子頁面

//在需要點(diǎn)擊后刷新的位置添加上
this.$emit('refresh-change',true);

vue刷新頁面的三種方式，并處理死循環(huán)

vue頁面刷新的辦法和處理頁面重復(fù)循環(huán)。先寫一下刷新頁面的方法，解決循環(huán)放在下邊。

1.直接使用刷新當(dāng)前頁面

會(huì)有短暫白屏，體驗(yàn)效果不好

location.reload();

2.通過路由傳入0，刷新當(dāng)前頁面

忽悠短暫白屏，體驗(yàn)效果不好

this.$router.go(0);

3.通過provide / inject組合

這個(gè)體驗(yàn)感是最好的！

第一步：先在App.vue里給 <router-view> 加一個(gè) if 判斷，通過 $nextTick()實(shí)現(xiàn)先移除再添加達(dá)到刷新的功能。

<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)，這個(gè)是因?yàn)樗⑿马撁婧螅@段代碼又重新執(zhí)行。

想要解決有兩種方法

1.在想要刷新的地方使用點(diǎn)擊事件，這樣只有在點(diǎn)擊的時(shí)候會(huì)觸發(fā)這個(gè)刷新事件

<template>
? <div>
? ? <button @click="cli"></button>
? </div>
</template>
<script>
export default {
? name: "1",
? methods: {
? ? cli() {
? ? ? this.$router.go(0); //我這里隨便用一種刷新的方法
? ? },
? },
};
</script>
<style scoped>
</style>

2.這種方法，使用定時(shí)器的辦法，不通過手動(dòng)點(diǎn)擊，自動(dòng)觸發(fā)

<template>
? <div></div>
</template>
<script>
export default {
? name: "1",
? mounted() {
? ? setInterval(() => {
? ? ? this.$router.go(0); //我這里隨便用一種刷新的方法
? ? }, 300000); //每5分鐘自動(dòng)調(diào)用一次
? },
};
</script>
<style scoped>
</style>