两种vue父组件向子组件动态传值的方法
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片。本文主要介绍了vue父组件向子组件动态传值的方法有两种:方法一:props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组。父组件:this.productImage=res.data.
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片。本文主要介绍了vue父组件向子组件动态传值的方法有两种:
方法一:
props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组。
父组件:
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;
}
PS:vuejs动态组件给子组件传递数据。
通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在中进行绑定。
<p class='app' id='deviceready'>
<component :is='currentView' :user_name.sync = 'user_name' :DOB.sync='DOB'></component>
</p>
组件的作用于是独立的。
组件的作用于是独立的,如果要从跟组件获取数据,那么需要一层层的传递才行,也就是说子组件只能从直接父组件获取数据,如果是根组件的数据,那么父组件就要继续暴露pops从而绑定来自根组件的数据。
更多推荐
所有评论(0)