源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-12-20 05:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue父组件向子组件动态传值的两种方法
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 [b]方法有两种,[/b] [b]方法一:[/b] props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组 [b]  父组件:[/b]
<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>
this.productImage=res.data.cover;
这里把通过后台返回的数组赋值给 [code]this.productImage[/code],然后把该数组传给子组件定义的props属性src-list [b]子组件:[/b]
watch:{
     srcList(curVal,oldVal){
      if(curVal){
       ;
       this.uploadImg=curVal;
       }
     },
}
然后子组件成功获取到该数组 [b]方法二:[/b] 通过ref属性,父组件调用子组件的方法,把要传的数组作为参数传给子组件,子组件获取该参数,并使用 [b]父组件:[/b]
this.$refs.productImage.getSrcList(res.data.cover); 
[b]子组件:[/b]
getSrcList(val){
  this.uploadImg=val;
}
[b]PS:下面看下vuejs动态组件给子组件传递数据 [/b] 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定
  <div class="app" id="deviceready">
    <component :is="currentView" :user_name.sync="user_name" :DOB.sync="DOB"></component>
  </div>
[b]组件的作用于是独立的[/b] 组件的作用于是独立的,如果要从跟组件获取数据,那么需要一层层的传递才行,也就是说子组件只能从直接父组件获取数据,如果是根组件的数据,那么父组件就要继续暴露pops从而绑定来自根组件的数据。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部