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從而綁定來自根組件的數據。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com