前言
在实际开发中,当页对数据库进行增删改的过程中,vue不会对DOM进行渲染,因此要用刷新来重新查询显示这些数据。
解决方法就是用provide / inject 组合,其作用是允许一个祖先组件向其所有子孙后代组件注入一个依赖,不论组件层次有多深,在上下游关系成立的时间里始终生效。因此会想到App.vue是所有页面的父组件及组件的祖先组件,所以肯定跟App.vue有关系。
解决方案
打开App.vue : 声明reload方法,控制router的显示或隐藏,从而控制页面的再次加载。
<!--App.vue-->
<template>
<div id="app">
<!--添加判断条件-->
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default{
name:'app',
provide(){//全局注册方法
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true,//显示状态
}
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function(){
this.isRouterAlive = true ;
})
},
}
}
</script>
子孙组件:
利用 inject 在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑代码完成后(增删改)直接this.reload(); 调用即可刷新当前页面。
<script>
export default{
name:'home',
inject:['reload']//在根节点上写
methods:{
deleteStudent(){
//...请求后台进行删除操作
//刷新页面
this.reload();
}
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/11703.html