前言
        在实际开发中,当页对数据库进行增删改的过程中,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>
Logo

前往低代码交流专区

更多推荐