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开发技术大全-第1章javascript概述
Jul 03 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
详解jenkins自动化部署vue
May 14 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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令牌 Token改进版
2008/07/18 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
python正则表达式re模块详细介绍
2014/05/29 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
在python中画正态分布图像的实例
2019/07/08 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
python输出pdf文档的实例
2020/02/13 Python
python 5个实用的技巧
2020/09/27 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
毕业生机械建模求职信
2013/10/14 职场文书
说明书格式及范文
2014/05/07 职场文书
力学专业求职信
2014/07/23 职场文书
2015新年寄语大全
2014/12/08 职场文书
教师思想工作总结2015
2015/05/13 职场文书
2015年中秋节主持词
2015/07/30 职场文书
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android