vue子页面控制父页面刷新问题
作者：Take Me Down
这篇文章主要介绍了vue子页面控制父页面刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue子页面控制父页面刷新
父页面
//父组件调用子组件
<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"//调用方法
></version>
</el-dialog>
methods:{
handleRefreshChange() {
this.onLoad(this.page);//调用父组件的刷新方法
},
}子页面
//在需要点击后刷新的位置添加上
this.$emit('refresh-change',true);vue刷新页面的三种方式，并处理死循环
vue页面刷新的办法和处理页面重复循环。先写一下刷新页面的方法，解决循环放在下边。
1.直接使用刷新当前页面
会有短暂白屏，体验效果不好
location.reload();
2.通过路由传入0，刷新当前页面
忽悠短暂白屏，体验效果不好
this.$router.go(0);
3.通过provide / inject组合
这个体验感是最好的！
第一步：先在App.vue里 给 <router-view> 加一个 if 判断，通过 $nextTick()实现先移除再添加达到刷新的功能。
<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; //先关闭，
this.$nextTick(function () {
this.isRouterAlive = true; //再打开
});
},
},
};
</script>第二步：在需要用到刷新的页面接收 inject:['reload']
export default {
inject:['reload'],
data () {
return {}
},第三步：在需要使用到刷新的地方直接调用
this.reload();
接下来，说下死循环，这个是因为刷新页面后，这段代码又重新执行。
想要解决有两种方法
1.在想要刷新的地方使用点击事件，这样只有在点击的时候会触发这个刷新事件
<template>
<div>
<button @click="cli"></button>
</div>
</template>
<script>
export default {
name: "1",
methods: {
cli() {
this.$router.go(0); //我这里随便用一种刷新的方法
},
},
};
</script>
<style scoped>
</style>2.这种方法，使用定时器的办法，不通过手动点击，自动触发
<template>
<div></div>
</template>
<script>
export default {
name: "1",
mounted() {
setInterval(() => {
this.$router.go(0); //我这里随便用一种刷新的方法
}, 300000); //每5分钟自动调用一次
},
};
</script>
<style scoped>
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。