vue父组件中获取子组件中的数据(实例讲解)


Posted in Javascript onSeptember 27, 2017

如下所示:

<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父组件中获取子组件中的数据(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
精通Javascript系列之数值计算
Jun 07 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
node 版本切换的实现
Feb 02 Javascript
ant design charts 获取后端接口数据展示
May 25 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 #Javascript
基于复选框demo(分享)
Sep 27 #Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 #Javascript
angular内置provider之$compileProvider详解
Sep 27 #Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 #Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 #Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 #Javascript
You might like
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
学习jquery之一
2007/04/27 Javascript
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
js select option对象小结
2013/12/20 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
手机端转换rem适应
2017/04/01 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
实习生辞职信范文
2015/03/02 职场文书
教师学习心得体会范文
2016/01/21 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
Win11软件图标固定到任务栏
2022/04/19 数码科技
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技