如下所示：

<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>

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

方法一：給相應(yīng)的子組件加ref

父組件在最后提交的時(shí)候獲取thi.$ref.avatar.相應(yīng)數(shù)據(jù)即可，因?yàn)樵谶@里才能保證圖片已經(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) {      //這個(gè)就是你要的path,并且會(huì)雙向綁定    }  }}</script>

以上這篇vue父組件中獲取子組件中的數(shù)據(jù)(實(shí)例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持錯(cuò)新站長站。