Vue添加自动刷新功能
前言 在实际开发中,当页对数据库进行增删改的过程中,vue不会对DOM进行渲染,因此要用刷新来重新查询显示这些数据。 解决方法就是用provide / inject 组合,其作用是允许一个祖先组件向其所有子孙后代
·
前言
在实际开发中,当页对数据库进行增删改的过程中,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>
更多推荐
已为社区贡献2条内容
所有评论(0)