vue父組件向子組件動(dòng)態(tài)傳值的兩種方法
在一些項(xiàng)目需求中需要父組件向子組件動(dòng)態(tài)傳值，比如我這里的需求是，父組件動(dòng)態(tài)通過(guò)axios獲取返回的圖片url數(shù)組然后傳給子組件，上傳圖片的子組件拿到該數(shù)組后進(jìn)行遍歷并展示圖片
方法有兩種，
方法一：
props傳值，這里注意一個(gè)問(wèn)題，傳過(guò)來(lái)的值需要用watch監(jiān)聽(tīng)并賦值，否則這里獲取到的是空數(shù)組
父組件：
<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>
this.productImage=res.data.cover;
這里把通過(guò)后臺(tái)返回的數(shù)組賦值給
this.productImage，然后把該數(shù)組傳給子組件定義的props屬性src-list
子組件：
watch:{
srcList(curVal,oldVal){
if(curVal){
;
this.uploadImg=curVal;
}
},
}
然后子組件成功獲取到該數(shù)組
方法二：
通過(guò)ref屬性，父組件調(diào)用子組件的方法，把要傳的數(shù)組作為參數(shù)傳給子組件，子組件獲取該參數(shù)，并使用
父組件：
this.$refs.productImage.getSrcList(res.data.cover);
子組件：
getSrcList(val){
this.uploadImg=val;
}
PS：下面看下vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)
通過(guò)子組件定義時(shí)候的props可以支持父組件給子組件傳遞數(shù)據(jù)，這些定義的props在子組件的標(biāo)簽中使用綁定屬性即可，但是如果使用的是<component>動(dòng)態(tài)組件，這個(gè)時(shí)候就沒(méi)有顯式的子組件標(biāo)簽，要給子組件傳遞數(shù)據(jù)需要在<component> 中進(jìn)行綁定
<div class="app" id="deviceready">
<component :is="currentView" :user_name.sync="user_name" :DOB.sync="DOB"></component>
</div>
組件的作用于是獨(dú)立的
組件的作用于是獨(dú)立的，如果要從跟組件獲取數(shù)據(jù)，那么需要一層層的傳遞才行，也就是說(shuō)子組件只能從直接父組件獲取數(shù)據(jù)，如果是根組件的數(shù)據(jù)，那么父組件就要繼續(xù)暴露pops從而綁定來(lái)自根組件的數(shù)據(jù)。
相關(guān)文章
Vue3通過(guò)ref操作Dom元素及hooks的使用方法
這篇文章主要介紹了Vue3通過(guò)ref操作Dom元素及hooks的使用方法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue 中幾種傳值方法(3種),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問(wèn)題
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue require.context全局注冊(cè)組件的具體實(shí)現(xiàn)
本文主要介紹了vue require.context全局注冊(cè)組件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
解決在vue項(xiàng)目中,發(fā)版之后,背景圖片報(bào)錯(cuò),路徑不對(duì)的問(wèn)題
下面小編就為大家分享一篇解決在vue項(xiàng)目中,發(fā)版之后,背景圖片報(bào)錯(cuò),路徑不對(duì)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue.js實(shí)現(xiàn)仿原生ios時(shí)間選擇組件實(shí)例代碼
本篇文章主要介紹了vue.js實(shí)現(xiàn)仿原生ios時(shí)間選擇組件實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文字加密功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
我們知道使用webpack打包vue項(xiàng)目后會(huì)生成一個(gè)dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運(yùn)行呢?這篇文章主要給大家介紹了關(guān)于vue打包之后的dist文件如何運(yùn)行的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue實(shí)現(xiàn)右上角時(shí)間顯示實(shí)時(shí)刷新
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右上角時(shí)間顯示實(shí)時(shí)刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10