Vue中多个子组件更新同一数据覆盖前一数据问题

        当我们在一个组件中 有多个子组件对同一接口 不同数据进行更改时 我遇到了 再更新最后一个组件 会把之前跟新的数据覆盖的情况

首先 是打开这一父组件时 三个子组件同时发送ajax请求

         当我们在更新第一个子组件内容后 想切换到另一个子组件更新另外的内容时

第一个子组件修改后数据样子

         修改第二个子组件的时候 我们修改了入职时间 但是我们跟改的名字又变回去了

         这是因为我们在打开父组件时 他们同时发送请求获取数据 当我们修改了第一个子组件的数据后 后端数据发生了变化 但是由于第二个子组件中拿到的数据还是未修改之前的数据 当我们修改了第二个子组件进行保存 他之前的username的值 又给后端数据重新更新为最初始的值

        解决思路 当我们修改完第一个子组件  切换到第二个子组件时 重新获取数据 而不是在父组件刚打开时全部一起获取数据

具体步骤

1.父组件的导航栏切换中有一个点击切换的事件 @tab-click 并给子组件绑定ref

2.在methods中定义这个方法 使用子组件中的方法

让我们点击切换子组件时 再发送请求数据的api

修改第一个子组件的username数据 保存

 修改第二个子组件的timeOfEntry数据 保存

 此时的名字是最新值 就解决了