vue child page controls parent page refresh
Parent page
//The parent component calls the child component<el-dialog :="showDialog" width="65%">
<version
v-if="showDialog"
:versionId="versionId"
:currentVersion="currentVersion"
:batchNo="batchNo"
:showDialog="showDialog"
:subjectList="subject"
@on-load = "onLoad"
@refresh-change="handleRefreshChange"//Calling method ></version>
</el-dialog>
methods:{
handleRefreshChange() {
();//Calling the refresh method of the parent component },
}Subpage
//Add to refresh the location after clickingthis.$emit('refresh-change',true);Three ways to refresh the page with vue and deal with the dead loop
The method of vue page refresh and repeated loops in the process of page repetition. First write a way to refresh the page and put the solution to the loop below.
1. Refresh the current page directly using it
There will be a short white screen, and the experience will not be good
();
2. Pass in 0 through route and refresh the current page
Fraud the short white screen, the experience is not good
this.$(0);
3. Through the provide/inject combination
This experience is the best!
Step 1: First add an if judgment to <router-view> in it, and use $nextTick() to remove it first and then add it to achieve refreshing.
<template>
<div >
<router-view v-if="isRouterAlive"> </router-view>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isRouterAlive: true,
};
},
provide() {
return {
reload: ,
};
},
methods: {
reload() {
= false; //Close first, this.$nextTick(function () {
= true; //Open again });
},
},
};
</script>Step 2: Receive on pages that need to be refreshed inject:['reload']
export default {
inject:['reload'],
data () {
return {}
},Step 3: Call directly where you need to use it to refresh
();
Next, let’s talk about the dead loop, because after refreshing the page, the code is executed again.
There are two ways to solve it
1. Use the click event where you want to refresh, so that this refresh event will only be triggered when clicked.
<template>
<div>
<button @click="cli"></button>
</div>
</template>
<script>
export default {
name: "1",
methods: {
cli() {
this.$(0); //I just use a refresh method here },
},
};
</script>
<style scoped>
</style>2. This method uses a timer method, and does not automatically trigger it without manually clicking.
<template>
<div></div>
</template>
<script>
export default {
name: "1",
mounted() {
setInterval(() => {
this.$(0); //I just use a refresh method here }, 300000); //Automatically called every 5 minutes },
};
</script>
<style scoped>
</style>Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.