How to get data from child component in vue parent component

<FormItem label="上传头像" prop="image">
  <uploadImg :width="150" :height="150" :name="&#39;avatar&#39;" size="150px*150px" ref="avatar"></uploadImg></FormItem>
 <FormItem label="上传营业执照" prop="businessLicence">
  <uploadImg :width="350" :height="200" :name="&#39;businessLicence&#39;" size="350px*200px" ref="businessLicence"></uploadImg></FormItem>

I wrote a sub-component for uploading images. The parent component needs to obtain the image address uploaded by the sub-component.

Method 1: Add the corresponding sub-component ref

The parent component only needs to obtain the corresponding data of thi.$ref.avatar. when it is finally submitted, because this is where you can ensure that the image has been uploaded. Otherwise, if the image has not been uploaded, the value obtained must be empty.

Method 2: $emit()

/*
    子组件*/<template>
    <input type=&#39;file&#39; @change="changeUrl" />
</template>
<script>export default {
    methods: {
        changeUrl(e) {            
        this.$emit(&#39;changeUrl&#39;, e.currentTarget.files[0].path)
        }
    }
}</script>/*
    父组件*/<template>
    <FormItem label="上传营业执照" prop="businessLicence">
        <uploadImg :width="350" :height="200" :name="&#39;license&#39;" size="350px*200px" @changeUrl="getUrl"></uploadImg>
    </FormItem>
</template>
<script>export default {
    methods: {
        getUrl(path) {            //这个就是你要的path,并且会双向绑定        }
    }
}</script>

The above is the detailed content of How to get data from child component in vue parent component. For more information, please follow other related articles on the PHP Chinese website!