国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

vue父組件向子組件動態(tài)傳值的兩種方法

2019-11-19 14:57:02
字體:
供稿:網(wǎng)友

在一些項目需求中需要父組件向子組件動態(tài)傳值,比如我這里的需求是,父組件動態(tài)通過axios獲取返回的圖片url數(shù)組然后傳給子組件,上傳圖片的子組件拿到該數(shù)組后進行遍歷并展示圖片

方法有兩種,

方法一:

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ù)。


發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 新龙县| 亳州市| 杭锦后旗| 孟津县| 贵港市| 平塘县| 麻栗坡县| 勃利县| 卓资县| 花莲市| 安西县| 随州市| 汾西县| 恩施市| 贡觉县| 图片| 滕州市| 桃园市| 安远县| 岳池县| 铜川市| 滦南县| 鹤山市| 鄂托克前旗| 庆安县| 辽宁省| 贵定县| 衡阳市| 东乌珠穆沁旗| 大邑县| 新津县| 威宁| 普宁市| 鹤壁市| 琼海市| 廉江市| 德保县| 运城市| 堆龙德庆县| 夹江县| 郓城县|