下面小编就为大家带来一篇vue父组件中获取子组件中的数据(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

如下所示:

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

自己写了个上传图片的子组件,父组件需要获取到子组件上传的图片地址,

方法一:给相应的子组件加ref

父组件在最后提交的时候获取thi.$ref.avatar.相应数据即可,因为在这里才能保证图片已经上传,否则如果图片没上传,拿到的值一定为空。

方法二:$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="上传营业执照" prop="businessLicence">
    <uploadImg :width="350" :height="200" :name="'license'" size="350px*200px" @changeUrl="getUrl"></uploadImg>
  </FormItem>
</template>
<script>
export default {
  methods: {
    getUrl(path) {
      //这个就是你要的path,并且会双向绑定
    }
  }
}
</script>

以上这篇vue父组件中获取子组件中的数据(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
电子烟巨头登陆港股 思摩尔国际首日暴涨150%

电子烟巨头登陆港股

随着电子烟制造商思摩尔国际正式登陆港交所,中国电子烟
上半年房企“零入门”长租公寓迎来新一轮洗牌

上半年房企“零入门”

原标题:上半年房企“零入门”,长租公寓迎来新一轮洗牌来
短视频电商化:抖音向“钱”快手向“上”

短视频电商化:抖音向“

短视频双雄抖音和快手之间的竞争已经从短视频蔓延到了
马斯克身家超越股神巴菲特 晋升全球第七大富豪

马斯克身家超越股神巴

马斯克目前是全球第七大富豪,排名超越了股神巴菲特,也领
数据虚高 刷单造假等亟须整顿

数据虚高 刷单造假等

与此同时,也暴露出夸大宣传以及商品质量和售后服务难保
蜜芽突围自救 会员体系“新瓶装旧酒”

蜜芽突围自救 会员体

蜜芽已于今年5月悄然将Plus会员体系变更升级为Pro会员
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大