vue父组件中获取子组件中的数据
时间:2022-05-10
本文章向大家介绍vue父组件中获取子组件中的数据,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<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 = “avatar”
父组件在最后提交的时候获取this.$refs.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>
2017.12.21更新
当使用this.$emit方法获取的时候,如果子组件想要给父组件传入多个值,则可以写多个参数,父组件在获取的时候获取多个参数的值即可
//父组件
getUrl(path1,path2) {
console.log(path1,path2)
}
注意问题:
1、父组件相应事件写在该子组件上
2、子组件如果并没有click事件触发,也没有类似本例input需要change事件触发,则在created或者mounted函数中让该函数加载即可
3、子组件向父组件传值需 是父组件 用到了 ,如果多个父组件引用了该子组件,则只有传值的时候用的子组件来自哪个父组件,这个父组件才可以接收到值,其他父组件获取不到子组件传的值。
- org.springframework.expression.spel.SpelEvaluationException: EL1004E: Method call: Method service()
- GITCHAT系列2:个性化推荐
- org.springframework.expression.spel.SpelEvaluationException: EL1011E: Method call: Attempted to call
- 【Keras】完整实现‘交通标志’分类、‘票据’分类两个项目,让你掌握深度学习图像分类
- PaddlePaddle发布新版API,简化深度学习编程
- 13(01)总结StringBuffer,StringBuilder,数组高级,Arrays,Integer,Character
- thymeleaf模板引擎调用java类中的方法(附源码)
- 由hugepage设置导致的数据库事故(r4笔记第28天)
- 判断js引擎是javascriptCore或者v8
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- 同样的sql执行结果不同的原因分析 (r4笔记第27天)
- 情感分析的新方法,使用word2vec对微博文本进行情感分析和分类
- 垂直属性
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(二)RESTful API实战笔记(接口设计及Java后端实现)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- react-router-config的使用
- Spring 源码解读第七弹!bean 标签的解析
- Kubeflow实战: 入门介绍与部署实践
- matplotlib基础绘图命令之violinplot
- 性能分析(3)- 短时进程导致用户 CPU 使用率过高案例
- stat 命令家族(1)- 详解 vmstat
- 性能测试必备知识(9)- 深入理解“软中断”
- Vue老项目支持Webpack打包
- 09-4 更改用户密码
- 10-3 信号
- 11-1 环境中存储的是什么?
- 【Rust日报】2020-08-07 无船同志关于Rust未来Generator语法的新尝试
- 11-2 环境是如何建立的
- 11-3 激活修改
- 12-1 定制提示符