您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)vue中怎么實現(xiàn)父組件向子組件動態(tài)傳值,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
方法有兩種,
方法一:
props傳值,這里注意一個問題,傳過來的值需要用watch監(jiān)聽并賦值,否則這里獲取到的是空數(shù)組
父組件:
<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>
this.productImage=res.data.cover;
這里把通過后臺返回的數(shù)組賦值給
this.productImage
,然后把該數(shù)組傳給子組件定義的props屬性src-list
子組件:
watch:{ srcList(curVal,oldVal){ if(curVal){ ; this.uploadImg=curVal; } }, }
然后子組件成功獲取到該數(shù)組
方法二:
通過ref屬性,父組件調(diào)用子組件的方法,把要傳的數(shù)組作為參數(shù)傳給子組件,子組件獲取該參數(shù),并使用
父組件:
this.$refs.productImage.getSrcList(res.data.cover);
子組件:
getSrcList(val){ this.uploadImg=val; }
PS:下面看下vuejs動態(tài)組件給子組件傳遞數(shù)據(jù)
通過子組件定義時候的props可以支持父組件給子組件傳遞數(shù)據(jù),這些定義的props在子組件的標(biāo)簽中使用綁定屬性即可,但是如果使用的是<component>動態(tài)組件,這個時候就沒有顯式的子組件標(biāo)簽,要給子組件傳遞數(shù)據(jù)需要在<component> 中進行綁定
<div class="app" id="deviceready"> <component :is="currentView" :user_name.sync="user_name" :DOB.sync="DOB"></component> </div>
組件的作用于是獨立的
組件的作用于是獨立的,如果要從跟組件獲取數(shù)據(jù),那么需要一層層的傳遞才行,也就是說子組件只能從直接父組件獲取數(shù)據(jù),如果是根組件的數(shù)據(jù),那么父組件就要繼續(xù)暴露pops從而綁定來自根組件的數(shù)據(jù)。
關(guān)于vue中怎么實現(xiàn)父組件向子組件動態(tài)傳值就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。