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;
}