利用vue怎么從父組件中獲取子組件中的數據

利用vue怎么從父組件中獲取子組件中的數據？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

如下所示：

<FormItem label="上傳頭像" prop="image">
   <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg>
</FormItem>
 <FormItem label="上傳營業執照" prop="businessLicence">
 <uploadImg :width="350" :height="200" :name="'businessLicence'" size="350px*200px" ref="businessLicence"></uploadImg>
</FormItem>

自己寫了個上傳圖片的子組件，父組件需要獲取到子組件上傳的圖片地址，

方法一：給相應的子組件加ref

父組件在最后提交的時候獲取thi.$ref.avatar.相應數據即可，因為在這里才能保證圖片已經上傳，否則如果圖片沒上傳，拿到的值一定為空。

方法二：$emit()

/*
  子組件
*/
<template>
  <input type='file' @change="changeUrl" />
</template>
<script>
export default {
  methods: {
    changeUrl(e) {
      this.$emit('changeUrl', e.currentTarget.files[0].path)
    }
  }
}
</script>
/*
  父組件
*/
<template>
  <FormItem label="上傳營業執照" prop="businessLicence">
    <uploadImg :width="350" :height="200" :name="'license'" size="350px*200px" @changeUrl="getUrl"></uploadImg>
  </FormItem>
</template>
<script>
export default {
  methods: {
    getUrl(path) {
      //這個就是你要的path,并且會雙向綁定
    }
  }
}
</script>

看完上述內容，你們掌握利用vue怎么從父組件中獲取子組件中的數據的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！