props接收数据有延迟?

3,470 阅读1分钟

背景

  • 点击修改获取的数据每次都是上一次的数据,就是子组件获取的数据没有实时更新。
  • 先说解决办法:在子组件使用watch监听props获取的数据,重新赋值新变量就可以。知道了赶紧写代码,写完回家睡觉。
  • 不急咱往下看,一起来分析下props,首先看下官方文档

说明

  • 我们知道props是用来接受父组件传递的数据,数据类型可以是我们常用的类型,值可以是静态或者是动态的。下面我们一起来做demo

业务

  • 我们先看下页面。
    22222
    quicker_6361ddd4-4597-4517-a801-859dfeb54b5e.png

测试

props

quicker_0eb5f38d-57a2-4c7d-8b8a-57f048b23868.png

  • 点击第一行,结果row为空。
    quicker_31c5877b-80f5-4e6d-9c46-4b4fedabee1d.png
  • 点击第二行,结果row为第一行数据。
    quicker_e41daed0-d0e1-408a-84eb-7ec2ca1b37e2.png
  • 再点击第一行,结果row为第二行数据。
    quicker_511de396-9500-4a42-af78-1ddeaf5c6472.png
watch

quicker_674f0fc7-3a1e-42ff-a1b4-d7f502b1933d.png

  • 点击第一行,结果:使用props的结果是空,使用watch监听得到的数据是正确。
    quicker_9c28ff66-6509-4c1d-82a7-266d7bfece47.png
  • 我们点击第二行,结果:使用props的结果是第一行数据,使用watch监听得到的数据是正确。
    quicker_9ef51a0a-579b-4e48-9ac4-0dcf5d7f6fd7.png

总结

  • 至此,我们知道了,使用props得到的是有延迟的数据,使用watch监听得到的是我们预期的数据。