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 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
Node.js的特点详解
Feb 03 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
JavaScript实现区块链
Mar 14 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
详解JWT token心得与使用实例
Aug 02 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
实用函数5
2007/11/08 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
js图片上传的封装代码
2017/08/01 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
在Python中调用ggplot的三种方法
2015/04/08 Python
教你学会使用Python正则表达式
2017/09/07 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
出国签证在职证明
2014/01/16 职场文书
爱护草坪标语
2014/06/24 职场文书
股东大会通知
2015/04/24 职场文书
党员公开承诺书2016
2016/03/24 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python