首頁  >  文章  >  web前端  >  如何從vue父元件中取得子元件中的數據

如何從vue父元件中取得子元件中的數據

一个新手
一个新手原創
2018-05-14 15:49:523341瀏覽


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

自己寫了個上傳圖片的子元件,父元件需要取得到子元件上傳的圖片地址,

方法一:給對應的子元件加ref

父元件在最後提交的時候取得thi.$ref.avatar.對應資料即可,因為在這裡才能保證圖片已經上傳,否則如果圖片沒上傳,拿到的值一定為空。

方法二:$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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn