vue 解决父组件每次进入子组件刷新子组件数据

vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性。

在做项目的过程中发现,业务需求是打开一个主页面需要vue父组件中的子组件重新加载数据,进入一个子组件查看对应信息,但是每次父组件进入子组件的时候只加载一次,子组件需要刷新才显示,后面重新加载需要对浏览器刷新才可以,因此在这里记录一下解决方式使得vue父组件中的子组件重新加载。

在父组件里定义一个key值(注意:这里的key值可以是任何变量名,不是唯一的),key值里面存放一个时间戳,然后传给子组件。通过子组件对父组件传来的时间戳值进行对比会重新加载一次数据。

父组件:

子组件:

(不需要任何操作,只需要在父组件添加一个key值,每次进入子组件就会重新加载数据)

结果演示:

 其原理就是根据每次点击key值传入的时间不一致,所以子组件获取之后会自动进行数据加载刷新。缺点是每次都会摧毁dom,但是对于业务不大的项目来说这是一个可以参考的解决方式。

如果看到这里文章对你有帮助的话,希望可以帮忙点个赞!!!

这会对我有非常大的帮助!!蟹蟹!!

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值