vue父子组件传值之异步传输数据的问题及解决
更新时间：2026年07月02日 15:14:45 作者：菜鸟上路_lbz
这篇文章主要介绍了vue父子组件传值之异步传输数据的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue父子组件传值之异步传输数据
在开发图片裁切页面时，用到了vue-cropper组件，
大概流程是
- element-upload选择图片
- FileReader().readAsDataURL加载图片获取base64
- cropper组件预览图片
- 完成裁切
其中组件关系
<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组件元素。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了LogicFlow内置菜单插件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
Vue项目报错：Uncaught SyntaxError: Unexpected token <
这篇文章主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
这篇文章主要介绍了Vue基于vuex、axios拦截器实现loading效果及axios的安装配置,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
这篇文章主要介绍了VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
Vue表单验证中的prop属性用于指定需要验证的表单字段,它定义了字段名称并与验证规则关联,确保数据的完整性和准确性,本文就来介绍一下element的el-form-item的prop作用,感兴趣的可以了解一下2025-01-01
vue 如何添加全局函数或全局变量以及单页面的title设置总结
本篇文章主要介绍了vue 如何添加全局函数或全局变量以及单页面的title设置总结，非常具有实用价值，需要的朋友可以参考下2017-06-06
在Vue项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要,debug是必备技能,这篇文章主要给大家介绍了关于intellij idea+vue前端调试配置的相关资料,需要的朋友可以参考下2024-09-09
下面小编就为大家分享一篇Vue的路由动态重定向和导航守卫实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
表格中有时候会有排序的需求,下面这篇文章主要给大家介绍了关于element-ui中表格设置正确的排序及设置默认排序的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
有些时候客户希望产品使用他们公司要求的字体,这个时候我们需要将客户提供的字体文件引入到项目中,下面这篇文章主要给大家介绍了关于Vue项目导入字体文件的方法步骤,需要的朋友可以参考下2024-03-03
最新评论