vue父组件向子组件动态传值的两种方法

蓓蕾心晴

发布于 2018-04-12 14:22:37

3.9K0

发布于 2018-04-12 14:22:37

文章被收录于专栏：前端小叙

在一些项目需求中需要父组件向子组件动态传值，比如我这里的需求是，父组件动态通过axios获取返回的图片url数组然后传给子组件，上传图片的子组件拿到该数组后进行遍历并展示图片，因为有时候获取到的会是空，所以这里要考虑到动态获取。

方法有两种，

方法一：

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 的函数！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-11-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度