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

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过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;
}

 

同理,子组件向父组件传值,如果是动态改变的,也要记得加watch函数,动态改变之后执行的操作写在watch里,比如 this.$emit 的函数!

见子组件向父组件传值


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是Spring Data?

&#xff08;这与“学生计划”有关&#xff0c;稍后我将重新讨论该主题。&#xff09; Spring Data在最近的几次采访中获得通过。 什么是Spring Data &#xff1f; 为了回答这个问题&#xff0c;让我们考虑持久性的标准方法–所有访问都是通过数据访问对象 &#xff08;DAO&a…

卸载WPS后,原office出现各种问题,报错,图标混乱

1.运行环境win7专业版64位操作系统&#xff0c;之前电脑上装了WPS和office2013&#xff0c;后来卸载了WPS&#xff0c;导致office图标显示不正常&#xff08;因为WPS与office有很多冲突的地方&#xff0c;卸载的时候会影响到注册表&#xff0c;导致office的注册表损坏&#xff…

计算机一级应用于段落还是文字,计算机一级复习资料

出国留学网小编们精心为广大考生准备了“2017年计算机一级PS基础知识点”&#xff0c;各位同学赶快学起来吧&#xff0c;做好万全准备&#xff0c;祝各位同学考试顺利通过。更多相关资讯请持续关注出国留学网。AdobePhotoshop 是目前最流行的平面设计软件之一。可以说&#xff…

C#中的CultureInfo类

CultureInfo类位于System.Globalization命名空间内&#xff0c;这个类和命名空间许多人都不是很熟悉&#xff0c;实际我们在写程序写都经常间接性的接触这个类&#xff0c;当进行数字&#xff0c;日期时间&#xff0c;字符串匹配时&#xff0c;都会进行CultureInfo的操作&#…

clistctrl控件最后插入在后面_老板让我把图片放到Excel表格中,批量插入效率高...

私信回复关键词【福利】&#xff0c;获取丰富办公资源&#xff01;助你高效办公早下班&#xff01;大家好&#xff0c;我是懂点 Excel 的小E~初入「江湖」&#xff0c;还请大家多多关照&#xff01;今天我们来学学 Excel 图片的 6 个小技巧&#xff0c;满满都是干货&#xff0c…

python天气预报的功能介绍_python实现智能语音天气预报

本系统主要包括四个函数&#xff1a; 1、获取天气数据 1、输入要查询天气的城市 2、利用urllib模块向中华万年历天气api接口请求天气数据 3、利用gzip解压获取到的数据&#xff0c;并编码utf-8 4、利用json转化成python识别的数据&#xff0c;返回为天气预报数据复杂形式的字典…

vue获取DOM元素并设置属性

这里我想到了2个方法&#xff1a; 方法一&#xff1a; 直接给相应的元素加id,然后再document.getElementById("id");获取&#xff0c;然后设置相应属性或样式 方法二&#xff1a; 使用ref,给相应的元素加ref“name” 然后再this.$refs.name获取到该元素 注意&…

甲骨文发布Java 8

甲骨文决定在3月18日发布升级到JDK&#xff08;Java开发工具包&#xff09;8的消息&#xff0c;尽管新版本可能会带来一些错误&#xff08;如Full speed所介绍的那样&#xff09; &#xff1a;甲骨文将在3月份发布Java 8&#xff0c;即使有错误 。 Oracle JDK 8发行经理Mathia…

python所有基础

下面就不一一列举了&#xff0c;所有的资料都和GitHub对接&#xff0c;到时候我有更新就直接拖到GitHub上面了。入门的小伙伴们可以进来看看&#xff0c;估计后面还会有很多项目&#xff0c;待更新。 转载于:https://www.cnblogs.com/wuzaipei/p/9633673.html

计算机硬件系统一直延用,会计从业资格证考试:会计电算化计算机硬件系统

要求掌握冯•诺依曼计算机体系结构的基本思想&#xff0c;熟悉计算机硬件的组成及其工作原理&#xff0c;掌握计算机中的常用术语和主要性能指标。1946年&#xff0c;著名美籍匈牙利数学家冯•诺依曼(JohnVon Neumann)提出并论证了计算机体系结构的基本思想。目前的电子计算机都…

部署环境_Hyperledger Fabric Composer环境部署(一)

声明&#xff1a;本体系Hyperledger Fabric Composer相关分享都是基于MacPro进行多次亲测和体验。今天我这里主要介绍的是这些先决条件安装完成后&#xff0c;如何搭建和使用一个基础环境的问题&#xff0c;适合有一定基础的同学一起交流&#xff0c;也欢迎随时留言交流&#x…

输入参数的数目不足_sklearn.decomposition.PCA 参数速查手册

sklearn常用的API参数解析&#xff1a;sklearn.linear_model.LinearRegression调用sklearn.decomposition.PCA(n_componentsNone, copyTrue, whitenFalse, svd_solverauto, tol0.0, iterated_powerauto, random_stateNone)参数n_components释义PCA 算法中所要保留的主成分个数 …

vue-cli打包之后的项目在nginx的部署

vue-cli执行 npm run build 进行打包&#xff0c;生成dist文件夹&#xff0c;把该文件夹下的文件直接复制到nginx服务器目录下&#xff0c;就可打开项目&#xff0c;但是只有首页是可以看到的&#xff0c;再刷新一下就404了&#xff0c;原因是vue的项目为单页应用&#xff0c;路…

了解位图

几周前&#xff0c;我和Alistair一起研究了用于对Neo4j数据库中节点已附加到其上的标签进行建模的代码。 这种工作方式是将32个节点ID的块表示为每个标签的32位位图 &#xff0c;其中位1表示节点具有标签&#xff0c;而0表示没有标签。 例如&#xff0c;假设我们有节点ID 0-3…

centos7输入法,非root用户无法使用

背景&#xff1a; 1. centos7安装完了输入法之后&#xff0c;root账号能正常使用&#xff0c;但是非root账号始终无法使用中文 解决方案&#xff1a;   1. 登录非root账号&#xff0c;编译家目录的隐藏文件.bash_profile  export GTK_IM_MODULEibus  export XMODIFIERSim…

服务器旧图片维护,图片服务器

注意&#xff1a;AKCMS已于2019年12月27日宣布停止更新&#xff0c;此文档仅供老用户参考&#xff0c;不建议新用户选择AKCMS建站。注意&#xff1a;AKCMS6.1.2已取消授权机制&#xff0c;文档中关于授权、服务、技术支持等的内容均已失效。3.9.4版本起&#xff0c;增加了图床功…

各种说明方法的答题格式_语文万能答题公式,给孩子收藏吧!

1、某句话在文中的作用1、文首&#xff1a;开篇点题&#xff1b;渲染气氛(散文)&#xff0c;埋下伏笔(记叙类文章)&#xff0c;设置悬念(小说)&#xff0c;为下文作辅垫&#xff1b;总领下文&#xff1b;2、文中&#xff1a;承上启下&#xff1b;总领下文&#xff1b;总结上文&…

pr文字转语音有插件吗_文字转语音软件深度解析

网络时代的迅猛发展&#xff0c;丰富了我们的眼见&#xff0c;便利了我们的生活&#xff0c;升华了我们的素养。那你知道近年来配音行业的迅速崛起吗&#xff1f;视频配音&#xff0c;广告配音&#xff0c;小视频配音等等&#xff0c;其实配音处处都陪伴在我们身边&#xff0c;…

装饰图案

装饰图案 我不经常使用的一种设计模式是Decorator 。 我不确定为什么这种模式不受欢迎&#xff0c;因为它很方便。 装饰器模式允许以受控方式向对象添加功能。 即使在使用静态类型的语言时&#xff0c;也可以在运行时运行&#xff01; 装饰器模式是子类的替代方法。 子类化在编…

Webpack - 自学笔记

webpack 4第1课 概念1 模块化工具 构建工具 打包工具2 webpack把所有的东西打包成js文件&#xff0c;压缩图片&#xff0c;把sass生成css,3 热加载4 自己有服务器第2课 安装1 先安装NodeJS node --version2 换成淘宝镜像 npm install -g cnpm --registryhttps://registry.np…