vue父组件向子组件动态传值的两种方法


Posted in Javascript onNovember 11, 2017

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片

方法有两种,

方法一:

props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组

  父组件:

<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>
this.productImage=res.data.cover;

这里把通过后台返回的数组赋值给

this.productImage,然后把该数组传给子组件定义的props属性src-list

子组件:

watch:{
     srcList(curVal,oldVal){
      if(curVal){
       ;
       this.uploadImg=curVal;
       }
     },
}

然后子组件成功获取到该数组

方法二:

通过ref属性,父组件调用子组件的方法,把要传的数组作为参数传给子组件,子组件获取该参数,并使用

父组件:

this.$refs.productImage.getSrcList(res.data.cover);

子组件:

getSrcList(val){
  this.uploadImg=val;
}

PS:下面看下vuejs动态组件给子组件传递数据

通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定

<div class="app" id="deviceready">
    <component :is="currentView" :user_name.sync="user_name" :DOB.sync="DOB"></component>
  </div>

组件的作用于是独立的

组件的作用于是独立的,如果要从跟组件获取数据,那么需要一层层的传递才行,也就是说子组件只能从直接父组件获取数据,如果是根组件的数据,那么父组件就要继续暴露pops从而绑定来自根组件的数据。

Javascript 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
javascript中this指向详解
Apr 23 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
详解Vue如何支持JSX语法
Nov 10 #Javascript
微信小程序异步处理详解
Nov 10 #Javascript
微信小程序实现选项卡功能
Jun 19 #Javascript
微信小程序实现多宫格抽奖活动
Apr 15 #Javascript
十分钟带你快速了解React16新特性
Nov 10 #Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 #Javascript
Three.js加载外部模型的教程详解
Nov 10 #Javascript
You might like
解析php中heredoc的使用方法
2013/06/17 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
一段实时更新的时间代码
2006/07/07 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
电子商务专业实习生自我鉴定
2013/09/24 职场文书
美容院考勤制度
2014/01/30 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
领导干部考核评语
2015/01/04 职场文书
新学期主题班会
2015/08/17 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL