Vue添加自动刷新功能

导读:本篇文章讲解 Vue添加自动刷新功能,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!