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的分页控件(C#)
Jan 06 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 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使用者状态管理功能的应用
2006/10/09 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
python实现超市扫码仪计费
2018/05/30 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python3中eval函数用法使用简介
2019/08/02 Python
wxPython实现整点报时
2019/11/18 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
Java基础知识面试要点
2016/07/29 面试题
优秀通讯员事迹材料
2014/01/28 职场文书
课外科技活动总结
2014/08/27 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
Windows server 2012搭建FTP服务器
2022/04/29 Servers