首页 > 其他 > 详细

关于在子组件中修改父组件变量值

时间:2021-04-25 10:17:45      阅读:18      评论:0      收藏:0      [点我收藏+]

上一篇提到我在父组件中封装了一个dialog子组件,修bug花了很久,习以为常的是解决了一个bug还有十个更难的bug等着你。果然,我想要通过子组件即弹窗的按钮修改父组件的某个变量值,起初是直接在子组件中的函数里发送请求然后给从props获得的值重新赋值,希望可以修改父组件变量值,喜闻乐见的报错了。

网上查了一下发现是vue 2.0后不允许直接通过props中的值来修改父组件的值,猜测可能防止子组件比较多时引擎混乱吧。于是在子组件中定义了一个局部变量,用props值初始化这个局部变量,然后修改局部变量的值,先不说这个逻辑能不能达到目的吧,我修改后发现甚至这个局部变量的值都没给初始化上,依然为空。谷歌了一下没发现有人出了这个问题,怀疑可能是页面加载渲染的时候,先加载的data里的变量,此时还没有props所以没初始化上?不太懂,对前端页面这个加载顺序真的是摸不着头脑。

后面在csdn看了几个帖子,发现修改父组件的值的方法大都是定义局部变量然后使用watch()监控父组件的值,子组件的局部变量一旦发生改变就通知父组件更新。但是都说的语焉不详的,最后七拼八凑的参考终于修改完了。

props传值:

技术分享图片

 

 

 

子组件中定义局部变量和watch():

技术分享图片

 

 

        然后在函数中发送请求将结果赋值给GridDataSon,为了达到页面上的数据实时更新的效果,在数值修改后又发送一遍请求获取子组件新显示的内容,这个时候,问题又来了。按照预想,如果第一遍请求发送后返回正常,那数据库中的数据已经是修改过得了,再发第二次请求的话获得的数据应该是更新后的数据才对,但是实际上获取的是旧数据也就是更新前的数据。开始一直以为是前面的监控功能出了问题,所以没有获得正确的值,根据这个思路找了很多帖子,最后当然没有解决,因为我的方向就错了。后来又怀疑是后端接口出错,用postman测了一下,发现没有任何问题,卡了将近两个小时后,我突然想到我的两个请求是并排写的,会不会是因为两个请求是同时发的,第二个请求返回的时候第一个请求还在更新,于是尝试将第二个请求放在了第一个请求获得resp后,奇迹出现了,第二次请求终于正常获取更新后的数据!也是我前端经验着实少,这个问题其实很简单也很容易想到,却因为我一开始就想歪了浪费很多时间,也是不懂得地方太多了,出问题后感觉哪里都有错。

两个请求排队发送:

技术分享图片

 

 

在子组件修改父组件中的数据,并实时更新数据:

 

 

 

技术分享图片

关于在子组件中修改父组件变量值

原文:https://www.cnblogs.com/skyb/p/14698502.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!