iframe下使用el-input-number组件造成数据不同步

iframe下使用el-input-number组件造成数据不同步

现象:

测试发现,eb上面输入的数字与实际上报接口的数字对不上,总是之前的那个数字,比如最开始是30,然后改成1,提交的时候发现接口中的参数传的是30
复现:经常复现

排查:

在我的电脑上重复上面的操作,发现并没有这个问题,但是在测试的设备上确实存在这个问题,而且可以经常复现,没有报错,代码层面去看也没有问题(当时觉得是与设备有关)
后来发现只要每次输入之后,让鼠标失焦后再提交这个问题就不会出现了

原因:

el-input-number组件的双向绑定有问题

输入的是3,但是绑定的值是1,但是当鼠标失焦后,会同步成3
说明这个组件在失焦后才会将数据进行同步,如果这个时候点击提交提交
正常会先触发blur事件,再触发click事件,也就是说不会存在问题

具体问题具体分析

el-input-number组件是在iframe中
提交按钮是在被嵌入的页面中
iframe会监听这个组件的数据,如果发生改变就会向主页面通信进行同步
postmessage是一个宏任务,也就是说,其实点击提交就会先把上一次的数据提交,然后再同步iframe中的数据,就导致了这个问题

解决

在主页面的提交函数中加一个setTimeout即可
就会先进行与iframe数据同步,在提交数据
玄学问题就此解决…