vue刷新页面的方法_vue局部刷新页面

vue刷新页面的方法_vue局部刷新页面业务需求/问题描述在项目中经常遇到一个问题,例如新增完表单数据和需要重新刷新页面。类似的业务还有很多。这时我们可以考虑的方式如下①(推荐)v-if刷新页面,并依赖注入(不太清楚的小伙伴可以看我之前的文章)//父组件<子组件v-if=’load’>exportdefault{ data(){ load=true }, methods:{ refresh(){ this.load=false this.$nextTick(()=>{ t

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

业务需求/问题描述

在项目中经常遇到一个问题,例如新增完表单数据和需要重新刷新页面。类似的业务还有很多。这时我们可以考虑的方式如下

①(推荐)v-if刷新页面,并依赖注入

(不太清楚的小伙伴可以看我之前的文章)

//父组件
<子组件 v-if='load'>
export default{ 
   
	data(){ 
   
		load = true
	},
	methods:{ 
   
		refresh(){ 
   
			this.load = false
			this.$nextTick(()=>{ 
   
				this.load = true
			})
		},
	}
	provide(){ 
   
		return{ 
   
			refresh:this.refresh,
		}
	}
}
//子组件中 当提交表单时候直接调用即可
export default{ 
   
	inject:['refresh'],
	methods:{ 
   
		this.refresh()
	}
}

②父组件提供方法子组件通过$parent更新页面(和依赖注入方式相同)

//父组件
export default{ 
   
	methods:{ 
   
		refresh(){ 
   
			//向服务器发请求
		}
	}
}
//子组件
export default{ 
   
	methods:{ 
   
		this.$parent.refresh()
	}
}

③(不推荐)this.$router.go(0)和location.reload()

this. r o u t e r . g o 利 用 h i s t o r y 中 前 进 和 后 退 的 功 能 , 传 入 0 刷 新 当 前 页 面 。 但 是 这 种 方 式 , 重 新 刷 新 当 前 页 , 如 果 这 个 页 面 文 件 比 较 大 , 白 屏 时 间 比 较 长 , 会 影 响 用 户 体 验 。 l o c a t i o n . r e l o a d ( ) 和 t h i s . router.go利用 history 中前进和后退的功能,传入 0 刷新当前页面。但是这种方式,重新刷新当前页,如果这个页面文件比较大,白屏时间比较长,会影响用户体验。 location.reload()和this. router.gohistory退0location.reload()this.router.go利用副作用一样

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181129.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 2015届校园招聘笔试/面试 基础知识点 总结

    2015届校园招聘笔试/面试 基础知识点 总结

  • windows访问smb服务器(samba服务器连接错误)

    在运行里面输入:\\xxx.xxx.xxx.xxx即可访问远程服务器转载于:https://www.cnblogs.com/liyuanhong/p/10671475.html

  • 无人机的电路板和控制器_无人机飞控电路图

    无人机的电路板和控制器_无人机飞控电路图第1步,查看官方ESP-Drone无人机ESP32-S2-WROVER模块的参考设计原理图第二步,用KiCAD绘制ESP32-S2-WROVER模块及周边电路。1、如图2-1所示,从KiCAD的原理图符号库中直接调出ESP32-S2-WROVER的原理图符号。注意,在安装KiCAD软件后,它的原理图符号库中已经有ESP32-S2-WROVER的原理图符号,可以直接调用,对于没有的原理图符号,可以进行自己创建。2、如图2-2所示,给ESP32-S2-WROVER模块…

  • Vue大数据可视化(大屏展示)解决方案

    Vue大数据可视化(大屏展示)解决方案一个基于vue、datav、Echart框架的大数据可视化(大屏展示)模板,最近更新了详细的介绍说明,实现大数据可视化。通过vue组件实现数据动态刷新渲染,内部图表可自由替换。部分图表使用DataV自带组件,可自由进行更改,持续更新…项目地址:vue-big-screen(码云)一、项目描述一个基于vue、datav、Echart框架的”数据大屏项目”,通过…

  • JavaScript常用基础算法「建议收藏」

    JavaScript常用基础算法「建议收藏」一、字符串1.字符串中出现最多次数的字符functionfindMaxDuplicateChar(str){varcnt={},//用来记录所有的字符的出现频次c="";//用来记录最大频次的字符for(vari=0;i<str.length;i++){varci=str[i];if(!cnt[ci]){

  • wordpress博客添加新浪微博挂件

    wordpress博客添加新浪微博挂件我一直想着把我的新浪微博嵌入到博客中,今天抽空到网上搜索了一下相关的插件,没有找到。后来看到了一篇如何把微博嵌入WordPress博客的方法,终于实现成功了。感谢分享这些的朋友们。一直想着把我的新浪微博嵌入到博客中,今天终于等来了这个功能的实现。想让你的博客读者顺带看看你的微博吗?新浪微博现在可以嵌入到多种博客之中了,这篇讲讲如何在w…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号