vue element-ui父子组件通信延迟问题

父组件关键:

<el-button type="text" size="small" @click='handleEdit(scope.$index, scope.row)'>
    <updateUser :ftsData="tableData" :ftsIndex="updateIndex">
    </updateUser>
</el-button>

handleEdit (index, row) {
  this.updateIndex = index
}

子组件关键:

<el-button type="info" @click="clickUpdate()">修改</el-button>

this.dialogFormVisible = true
this.userForm = this.ftsData[this.ftsIndex]

当前结果:
获取父组件table中的行的索引值,传递到子组件,子组件根据索引(通信延迟)填充表单。
存在问题:
子组件获取父组件的索引总是慢一拍,比如说我选中了第2行,理应索引值为1,但是组件填充上一次比如说是第3行,索引值为2的数据,导致了每次修改新行时,第一次填充的都是上一次修改的数据。
说得精简一点,就是vue element-ui父子组件通信延迟问题。
clipboard.png
有没有大神~

阅读 3.5k
评论
    6 个回答

    参考@宋家合和@吃山鬼的神仙给出的解决思路。
    我找到了最终的解决方案,非常谢谢大家,二位的答案我都给赞了~
    但是不能同时采纳2个人的答案,所以我斗胆把自己的解决方案写下来~
    1.父组件封装数据为finalData

    <el-button type="text" size="small" @click='handleEdit(scope.$index, scope.row)'>
        <updateUser :ftsData="finalData">
        </updateUser>
    </el-button>
    
    handleEdit (index, row) {
      this.updateIndex = index
      this.finalData = this.tableData[this.updateIndex]
    }

    2.子组件添加watch监听finalData变化

    watch: {
      finalData: function () {
        this.userForm = this.finalData
      }
    }

    备注:问题中子组件的关键代码不变

      使用watch 监听ftsIndex 的变化

        感觉是缓存了页面,,这样,你把tableData[updateIndex]在父组件组装好后传给子组件,试下

          在数据变化了,在$nextTick()中去获取dom变化

            • 5.2k

            关键是 updateIndex 这个字段吧。
            在父组件传入,和子组件接收这个字段的时候 打个断点看看,是哪里慢了一拍

              你先确认一下你的绑定的数据是不是响应的……之前踩过这个坑

                撰写回答

                登录后参与交流、获取后续更新提醒

                相似问题
                推荐文章