在一些項(xiàng)目需求中需要父組件向子組件動(dòng)態(tài)傳值，比如我這里的需求是，父組件動(dòng)態(tài)通過(guò)axios獲取返回的圖片url數(shù)組然后傳給子組件，上傳圖片的子組件拿到該數(shù)組后進(jìn)行遍歷并展示圖片，因?yàn)橛袝r(shí)候獲取到的會(huì)是空，所以這里要考慮到動(dòng)態(tài)獲取。

方法有兩種，

方法一：

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

然后子組件成功動(dòng)態(tài)獲取到該數(shù)組

?

方法二：

通過(guò)ref屬性，父組件調(diào)用子組件的方法，把要傳的數(shù)組作為參數(shù)傳給子組件，子組件獲取該參數(shù)，并使用

父組件：

this.$refs.productImage.getSrcList(res.data.cover);

子組件：

getSrcList(val){this.uploadImg=val; }

?

同理，子組件向父組件傳值，如果是動(dòng)態(tài)改變的，也要記得加watch函數(shù)，動(dòng)態(tài)改變之后執(zhí)行的操作寫在watch里，比如 this.$emit 的函數(shù)！

見(jiàn)子組件向父組件傳值

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的vue父组件向子组件动态传值的两种方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。