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

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

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

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

props传值:

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

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

两个请求排队发送：

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