一、需求

二、在父組件upload-cover中：

通過$refs['子組件的ref屬性值']就能拿到子組件對象

三、在子組件imgae-list（相對于父組件upload-cover來說，image-list組件是子組件）中

通過在data中定義一個selected，來保存當前選中的封面圖片的索引，這樣父組件upload-cover可以通過$refs['image-list']就能拿到子組件對象,然后通過$refs['image-list'].selected拿到 已選中的封面圖片的索引

四、在子組件upload-cover（相對于index組件來說，upload-cover組件是子組件）

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

五、在父組件index組件中

當我們給子組件提供的數據既需要使用，又需要修改時，這個時候我們可以使用v-model簡化
v-model="article.cover.images[index]相當于下面兩行代碼：
：value = “article.cover.images[index]” 給子組件傳遞了一個名字叫value的數據
@input = “article.cover.images[index]” 默認監聽input事件，當事件發生時，
他會綁定數據 = 事件參數

使用v-model進行數據的雙向綁定

默認會監聽input事件，接收到子組件upload-cover傳遞過來的已選中封面圖片的url

默認會 v-bind:value = v-model綁定的數據，即當父組件中v-model綁定的數據發送改變時，在子組件中可以通過聲明props: [‘value’]

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。