As shown below:
<FormItem label="Upload avatar" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <FormItem label="Upload business license" prop="businessLicence"> <uploadImg :width="350" :height="200" :name="'businessLicence'" size="350px*200px" ref="businessLicence"></uploadImg> </FormItem>
I wrote a child component to upload pictures myself. The parent component needs to obtain the image address uploaded by the child component.
Method 1: Add ref to the corresponding subcomponent
The parent component can obtain the corresponding data of thi.$ when the last submission is made, because it is here to ensure that the image has been uploaded. Otherwise, if the image is not uploaded, the value obtained must be empty.
Method 2: $emit()
/*
Subcomponents
*/
<template>
<input type='file' @change="changeUrl" />
</template>
<script>
export default {
methods: {
changeUrl(e) {
this.$emit('changeUrl', [0].path)
}
}
}
</script>
/*
Parent component
*/
<template>
<FormItem label="Upload business license" prop="businessLicence">
<uploadImg :width="350" :height="200" :name="'license'" size="350px*200px" @changeUrl="getUrl"></uploadImg>
</FormItem>
</template>
<script>
export default {
methods: {
getUrl(path) {
//This is the path you want, and it will be bound in two directions }
}
}
</script>
The above article obtaining data from child components (example explanation) in vue parent component is all the content I share with you. I hope you can give you a reference and I hope you can support me more.