利用vue怎么從父組件中獲取子組件中的數(shù)據(jù)

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

如下所示：

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

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

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

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

方法二：$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="上傳營業(yè)執(zhí)照" 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>

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