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
父组件在最后提交的时候获取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父组件中获取子组件中的数据(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue中父组件向子组件通信的方法
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s
-
Vue2.x中的父组件传递数据至子组件的方法
父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-girl-group> </div> </template> script <script> import vGirlGroup from './GirlGroup' export default { name: 'girl', components: { vGirlGro
-
vue父子组件的数据传递示例
1.父组件向子组件传递数据 <div id="box"> <aaa></aaa> </div> <template id="aaa"> <h1>模板aaa=>{{msg1}}</h1> //msg1写在这里是可以的,因为这是父组件内部 //<bbb>{{msg1}}</bbb> //这种写法是不可以的,这是在子组件内部,要在这里显示父组件的数 //据,需
-
vue父组件中获取子组件中的数据(实例讲解)
如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo
-
Vue父组件如何获取子组件中的变量
在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题. 之前有说过通过ref来让父组件操作子组件,并且传值,那么我们今天来详细看看. 案例一:点击父组件的按钮,操作子组件显示 注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用. 介绍:这里通过给子组件绑定ref属性,引号命名自定义,然后父组件通过 this.$refs.名字 就可以操作子组件的元素,以
-
React中父组件如何获取子组件的值或方法
目录 父组件获取子组件的值或方法 方法一 方法二 方法三 React函数式组件传值之子传父 具体案例 效果展示 父组件获取子组件的值或方法 先来说下从哪获取的启发,想要从父组件获取子组件的值或方法... 一次写代码的时候,用 Antd 中的 Modal 包裹了一个子组件,子组件中包含 input 输入框,想要在点击对话框上面确定按钮时(即Modal 自带的 onOk方法),拿到其中输入的值 下面用一个父组件(Father.js)和子组件(Hearder.js)来演示如何能拿到值和方法: 方法一
-
React Hook父组件如何获取子组件的数据/函数
目录 React Hook父组件获取子组件数据/函数 子组件MyWorldMap 父组件MyTrip React Hook父组件提交子组件form 父组件 子组件 React Hook父组件获取子组件数据/函数 我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用. 文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hook的讲的太少,要不就是父子组件傻傻分不清,于是只好再啃了一下文档,就学了一下其它hoo
-
vue ref如何获取子组件属性值
目录 ref获取子组件属性值 父引入.注册组件并调用组件 调用子组件的函数 调用子组件的属性 子组件更改属性 父组件 子组件 ref获取子组件属性值 父引入.注册组件并调用组件 引入.注册 <script> .... import CustomerModal from './modules/CustomerModal' export default { name: "CustomerList", mixins:[JeecgListMixin],
-
vue中实现子组件接收父组件方法并获取返回值
目录 子组件接收父组件方法并获取返回值 父组件 GetCallback.vue 子组件 CallbackChild1.vue 子组件接收父组件的另一种方法 子组件接收父组件方法并获取返回值 项目中有时候会遇到父子组件传值的问题,比如子组件需要接收父组件方法并获取该方法返回值的时候. 使用this.$emit('方法名', '参数1', '参数2')的方式,获取到不是父组件方法的return值.但是我们可以将参数改为回调函数的形式,父组件里执行该回调函数,返回值后给子组件,子组件再接收返回值. 示
-
vue 父组件中调用子组件函数的方法
在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt
-
vue 父组件通过$refs获取子组件的值和方法详解
前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调
-
vue中子组件的methods中获取到props中的值方法
父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中 <template> <div> <head-top></head-top> <section class="data_section"> <header class="chart-title">数据统计</header> <el-row :gutter=&
-
vue实现父组件获取子组件的方法或属性值详解
目录 父组件获取子组件方法或属性值 这里主要使用了vue的$ref 父组件获取子组件中的变量 案例一:点击父组件的按钮,操作子组件显示 案列二:获取子组件data中的变量 父组件获取子组件方法或属性值 vue的本质就是每一块只负责自己这一块的工作,这样更容易维护. 这里主要使用了vue的$ref 当用在一般的标签上时,主要功能是获取dom节点,进行一些dom的操作. 当使用在子组件上,可以用来获取子组件的属性. 那么下面我们要实现的就是如何在父组件上使用子组件的方法 目标:我需要实现一个在父组件
随机推荐
- 到初创公司工作的五个理由
- 在Python中操作字典之fromkeys()方法的使用
- php中get_magic_quotes_gpc()函数说明
- 解析array splice的移除数组中指定键的值,返回一个新的数组
- 浅谈lumen的自定义依赖注入
- 浅谈python字典多键值及重复键值的使用
- asp飞飞无限级分类v1.0 Asp+sql+存储过程+ajax提供下载
- c++图像处理:24位真彩图颜色变换实例
- Android控件之TextView的分析探究
- css下margin、padding、border、background和font缩写示例
- JS分割字符串并放入数组的函数
- <script defer> defer 是什么意思
- 浅析被遗忘的SQLServer比较运算符修饰词
- oracle group by语句实例测试
- Jquery网页出现的乱码问题的三种解决方法
- Android源码学习之观察者模式应用及优点介绍
- 深入浅出的学习Java ThreadLocal
- Java文件操作工具类fileUtil实例【文件增删改,复制等】
- Android侧滑导航栏的实例代码
- php中autoload的用法总结