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 26 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 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
浅析get与post的一些特殊情况
2014/07/28 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
Js的MessageBox
2006/12/03 Javascript
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
深入浅析Python中的yield关键字
2018/01/24 Python
windows下python安装小白入门教程
2018/09/18 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
python能开发游戏吗
2020/06/11 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
金融专业个人求职信
2013/09/22 职场文书
微笑服务标语
2014/06/24 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
教师党员整改措施
2014/10/24 职场文书
同学会感言
2015/07/30 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python