欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue父組件中獲取子組件中的數(shù)據(jù)(實(shí)例講解)

 更新時(shí)間：2017年09月27日 08:41:35   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇vue父組件中獲取子組件中的數(shù)據(jù)(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<FormItem label="上傳頭像" prop="image">
   <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg>
</FormItem>
 <FormItem label="上傳營(yíng)業(yè)執(zhí)照" prop="businessLicence">
 <uploadImg :width="350" :height="200" :name="'businessLicence'" size="350px*200px" ref="businessLicence"></uploadImg>
</FormItem>

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

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

父組件在最后提交的時(shí)候獲取thi.$ref.avatar.相應(yīng)數(shù)據(jù)即可，因?yàn)樵谶@里才能保證圖片已經(jīng)上傳，否則如果圖片沒(méi)上傳，拿到的值一定為空。

方法二：$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íng)業(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í)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論