Vue 상위 구성 요소의 하위 구성 요소에서 데이터를 얻는 방법

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

이미지 업로드를 위한 하위 구성요소를 작성했습니다. 상위 구성요소는 하위 구성요소가 업로드한 이미지 주소를 가져와야 합니다.

방법 1: 해당 하위 구성요소에 참조를 추가합니다.

상위 구성요소가 최종적으로 제출되면 이를 가져옵니다. .$ref.avatar. 여기에서 이미지가 업로드되었는지 확인할 수 있으므로 해당 데이터로 충분합니다. 그렇지 않으면 이미지가 업로드되지 않은 경우 얻는 값은 비어 있습니다.

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

위 내용은 Vue 상위 구성 요소의 하위 구성 요소에서 데이터를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!