一、需求

二、在父組件upload-cover中：

通過(guò)$refs['子組件的ref屬性值']就能拿到子組件對(duì)象

三、在子組件imgae-list（相對(duì)于父組件upload-cover來(lái)說(shuō)，image-list組件是子組件）中

通過(guò)在data中定義一個(gè)selected，來(lái)保存當(dāng)前選中的封面圖片的索引，這樣父組件upload-cover可以通過(guò)$refs['image-list']就能拿到子組件對(duì)象,然后通過(guò)$refs['image-list'].selected拿到 已選中的封面圖片的索引

四、在子組件upload-cover（相對(duì)于index組件來(lái)說(shuō)，upload-cover組件是子組件）

通過(guò)$emit('input', imageList.image[selected].url),將已選中的封面圖片的url傳遞給父組件，讓父組件展示已選中的圖片，并方便父組件將數(shù)據(jù)提交到服務(wù)器。

五、在父組件index組件中

當(dāng)我們給子組件提供的數(shù)據(jù)既需要使用，又需要修改時(shí)，這個(gè)時(shí)候我們可以使用v-model簡(jiǎn)化
v-model="article.cover.images[index]相當(dāng)于下面兩行代碼：
：value = “article.cover.images[index]” 給子組件傳遞了一個(gè)名字叫value的數(shù)據(jù)
@input = “article.cover.images[index]” 默認(rèn)監(jiān)聽(tīng)input事件，當(dāng)事件發(fā)生時(shí)，
他會(huì)綁定數(shù)據(jù) = 事件參數(shù)

使用v-model進(jìn)行數(shù)據(jù)的雙向綁定

默認(rèn)會(huì)監(jiān)聽(tīng)input事件，接收到子組件upload-cover傳遞過(guò)來(lái)的已選中封面圖片的url

默認(rèn)會(huì) v-bind:value = v-model綁定的數(shù)據(jù)，即當(dāng)父組件中v-model綁定的數(shù)據(jù)發(fā)送改變時(shí)，在子組件中可以通過(guò)聲明props: [‘value’]

然后在需要使用數(shù)據(jù)的地方v-bind綁定value即可

總結(jié)

以上是生活随笔為你收集整理的父组件访问子组件中的数据（父子组件通信案例：父组件访问子组件$refs[‘子组件‘]，子组件传递数据给父组件（父组件中使用v-model））的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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