在開發圖片裁切頁面時，用到了vue-cropper組件，大概流程是：

element-upload選擇圖片

FileReader().readAsDataURL加載圖片獲取base64

cropper組件預覽圖片

完成裁切

其中組件關系：

<upload><crop>……

在上傳完成后，readAsDataURL方法將圖片讀取傳值給子組件crop，但此時crop組件的img參數并沒有讀取到圖片數據，巧合地，在開發過程中通過隨意改變crop組件的代碼導致vue重新加載（熱更新）此時crop組件就可以加載出圖片，通過此行為可以判斷出，子組件在父組件完成操作前已經完成了dom渲染，加上readAsDataURL為異步方法，所以導致crop組件并沒有接收到圖片數據就完成了渲染。
解決方案：

<upload><crop v-if='img!=null' :img='base64'>……

在crop子組件加載時，我們先通過v-if判斷是否完成img數據讀取，再去選擇性加載crop組件，事實上在本次開發過程中的本意也是如此。按錯誤寫法，打開頁面時，crop已經渲染在了頁面，由此就可以直接判斷出該問題。改正后只會在選擇圖片后才會出現crop組件元素。
前端道路，任重道遠。

總結

以上是生活随笔為你收集整理的vue父子组件传值：异步传输数据的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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