兩種vue父元件向子元件動態傳值的方法分享

在一些專案需求中需要父元件向子元件動態傳值，例如我這裡的需求是，父元件動態透過axios取得傳回的圖片url數組然後傳給子元件，上傳圖片的子元件拿到該數組後進行遍歷並展示圖片。本文主要介紹了vue父元件動態傳值給子元件的兩種方法 ,需要的朋友可以參考下，希望能幫助大家。

方法有兩種，

方法一：

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在子元件的標籤中使用綁定屬性即可，但如果使用的是動態元件，這個時候就沒有明確的子元件標籤，而要給子元件傳遞資料需要在 中進行綁定

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

元件的作用於是獨立的

元件的作用於是獨立的，如果要從跟元件取得數據，那麼需要一層層的傳遞才行，也就是說子元件只能從直接父元件取得數據，如果是根元件的數據，那麼父元件就要繼續暴露pops從而綁定來自根元件的數據。

相關推薦：

vue中頁面反傳值簡單實作方法分享

VUE2.0元件的傳值問題

php中傳值的方法介紹

#

以上是兩種vue父元件向子元件動態傳值的方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！