Vue页面刷新方法(子组件改变数据后兄弟组件刷新,不闪烁)【笔记】

Vue.js 专栏收录该内容
43 篇文章 0 订阅

问题描述:

  • 今天在做个人博客的时候遇到一个问题,一个文章详情页面使用了评论显示组件和发表评论组件,但是当评论发表完成后评论显示组件的数据不会自动渲染出来,那么如何让最新的数据渲染呢

问题分析:

  • 可以看出这两个组件是兄弟组件,在评论显示组件中,是通过mounted声明周期函数获取数据的,也就是el挂载到实际上时获取的,但是当发表评论数据库内容发生变化后,并不能主动去获取数据的更新

问题解决:

方案一(通用)

  • location.reload()
  • 缺点:页面闪烁

方案二(通用)

  • 路由方法:this.$router.go(0)
  • 缺点:同样会闪烁,页面内容多可能会有很久的留白

方案三(适用于当前页面中有router-view的情况)

  • provide/inject方法
  • 原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效
  • 在App.vue里声明reload方法,控制router-view的显示或隐藏起来控制页面的再次加载
<template>
  	<div id="app">
	    <router-view v-if="isRouterAlive"></router-view>
  	</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>
  • 在需要用到刷新的页面。在页面注入App.vue组件提供(provide)的reload依赖,在逻辑完成之后(删除或添加…),直接this.reload()调用,即可刷新当前页面。

方案四(兄弟组件数据变化的刷新)

  • 在数据添加成功的回调函数中先跳转到一个假路由,再跳转回来
let NewPage = "_empty" + "?time=" + new Date().getTime() / 500;
this.$router.push(NewPage);
this.$router.go(-1);
  • 因为这时数据已经添加到数据库中,我们只需要在updated声明周期中重新获取一下即可。
  • 这种方式也不会造成页面的闪烁,就像直接显示出来了一样

总结:

  • 刷新页面有好很多方法,根据不同的需求选择不同的方法,对于我在updated生命周期中重新获取的方法可能不是最简单的,如果有更好的方法,麻烦大佬指正。

你要去做一个大人,不要回头,不要难过。

“做一个有温度的人。”

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值