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 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
将list转换为json失败的原因
Dec 17 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
深入学习JavaScript 高阶函数
Jun 11 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
PHP4.04简明安装
2006/10/09 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
Javascript - HTML的request类
2006/07/15 Javascript
javascript一点特殊用法
2008/05/28 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
vue按需加载实例详解
2019/09/06 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
什么是python的函数体
2020/06/19 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
pymysql模块使用简介与示例
2020/11/17 Python
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
美容师的职业规划书
2013/12/27 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
环保证明
2015/06/23 职场文书
js判断两个数组相等的5种方法
2022/05/06 Javascript