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

这篇文章主要为大家详细介绍了vue父组件向子组件动态传值的两种方法，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

在一些项目需求中需要父组件向子组件动态传值，比如我这里的需求是，父组件动态通过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;
}

 

PS：下面看下vuejs动态组件给子组件传递数据

 

通过子组件定义时候的props可以支持父组件给子组件传递数据，这些定义的props在子组件的标签中使用绑定属性即可，但是如果使用的是<component>动态组件，这个时候就没有显式的子组件标签，要给子组件传递数据需要在<component> 中进行绑定

代码如下：

  <div class="app" id="deviceready">
    <component :is="currentView" :user_name.sync="user_name" :DOB.sync="DOB"></component>
  </div>

 

组件的作用于是独立的

 

组件的作用于是独立的，如果要从跟组件获取数据，那么需要一层层的传递才行，也就是说子组件只能从直接父组件获取数据，如果是根组件的数据，那么父组件就要继续暴露pops从而绑定来自根组件的数据。

 

本文来自：http://www.q1010.com/184/4312-0.html

注：关于vue父组件向子组件动态传值的两种方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js