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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
vue权限问题的完美解决方案
May 08 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
layui前端时间戳转化实例
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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
chrome调试javascript详解
2015/10/21 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
使用Python生成XML的方法实例
2017/03/21 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
transform python环境快速配置方法
2018/09/27 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
Python实现元素等待代码实例
2019/11/11 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
化学教师教学反思
2014/01/17 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
护士节策划方案
2014/05/19 职场文书
劳模事迹材料范文
2014/12/24 职场文书
个人求职信格式范文
2015/03/20 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书