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组件元素。
前端道路,任重道远。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值