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 相关文章推荐
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
微信小程序实现搜索功能
Mar 10 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
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
php实现映射操作实例详解
2019/10/02 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python import自定义模块方法
2015/02/12 Python
Python入门教程之if语句的用法
2015/05/14 Python
Python 文件处理注意事项总结
2017/04/10 Python
python如何实现反向迭代
2018/03/20 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
华为C++笔试题
2014/08/05 面试题
学校运动会开幕演讲稿
2014/01/04 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers