vue父组件向子组件动态传值的两种方法
2017-11-10 18:49
543 查看
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空,所以这里要考虑到动态获取。
方法有两种,
方法一:
props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组
父组件:
这里把通过后台返回的数组赋值给
然后子组件成功动态获取到该数组
方法二:
通过ref属性,父组件调用子组件的方法,把要传的数组作为参数传给子组件,子组件获取该参数,并使用
父组件:
子组件:
同理,子组件向父组件传值,如果是动态改变的,也要记得加watch函数,动态改变之后执行的操作写在watch里,比如 this.$emit 的函数!
见子组件向父组件传值
方法有两种,
方法一:
props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组
父组件:
<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>
this.productImage=res.data.cover;
这里把通过后台返回的数组赋值给
this.productImage,然后把该数组传给子组件定义的props属性src-list
子组件:
watch:{ srcList(curVal,oldVal){ if(curVal){ this.uploadImg=curVal; } }, }
然后子组件成功动态获取到该数组
方法二:
通过ref属性,父组件调用子组件的方法,把要传的数组作为参数传给子组件,子组件获取该参数,并使用
父组件:
this.$refs.productImage.getSrcList(res.data.cover);
子组件:
getSrcList(val){ this.uploadImg=val; }
同理,子组件向父组件传值,如果是动态改变的,也要记得加watch函数,动态改变之后执行的操作写在watch里,比如 this.$emit 的函数!
见子组件向父组件传值
相关文章推荐
- vue父组件向子组件动态传值的两种方法
- 动态加载jQuery的两种方法实例分析
- 动态加载jQuery的两种方法实例分析
- 黑马程序员-我所知道的两种做动态字的方法
- 说说Android 两种为自定义组件添加属性的使用方法和区别
- JBPM4.4 使用泳道动态指定下一个任务节点任务人的两种方式之方法二
- 根据图片高度动态改变ViewPager高度方法的两种方式对比: PageTransformer& OnPageChangeListener
- Android在布局中动态添加view的两种方法
- Android实现listview动态加载数据分页的两种方法
- Django—Form两种解决表单数据无法动态刷新的方法
- 如何用两种不同的方法动态绘制饼状图
- 自定义Flex组件的两种方法
- C++调用DLL有两种方法——静态调用和动态调用
- js动态拼接正则表达式的两种方法
- 两种Eclipse部署动态web项目方法
- backbone中动态新增的元素节点触发事件的问题有两种解决方法
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
- Vue父组件调用子组件事件方法
- ASP.net组件编程中的两种事件编写方法 (转)
- Java动态代理的两种实现方法