vue父子组件传值之异步传输数据的问题及解决

vue父子组件传值之异步传输数据

在开发图片裁切页面时，用到了vue-cropper组件，

大概流程是

1. element-upload选择图片
2. FileReader().readAsDataURL加载图片获取base64
3. cropper组件预览图片
4. 完成裁切

其中组件关系

<upload>
	<crop>
	……

在上传完成后，readAsDataURL方法将图片读取传值给子组件crop，但此时crop组件的img参数并没有读取到图片数据，巧合地，在开发过程中通过随意改变crop组件的代码导致vue重新加载（热更新）此时crop组件就可以加载出图片，通过此行为可以判断出，子组件在父组件完成操作前已经完成了dom渲染，加上readAsDataURL为异步方法，所以导致crop组件并没有接收到图片数据就完成了渲染。

解决方案

<upload>
	<crop v-if='img!=null' :img='base64'>
	……

在crop子组件加载时，我们先通过v-if判断是否完成img数据读取，再去选择性加载crop组件，事实上在本次开发过程中的本意也是如此。

按错误写法，打开页面时，crop已经渲染在了页面，由此就可以直接判断出该问题。

改正后只会在选择图片后才会出现crop组件元素。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。