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 的函数!

见子组件向父组件传值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

CSS 变量教程

今年三月,微软宣布 Edge 浏览器将支持 CSS 变量。 这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS...

358110
来自专栏angularejs学习篇

关于文本框输入长度验证实现

13210
来自专栏Golang语言社区

Go-defer,panic,recover

defer 语法: defer function_name() 简单来讲,在defer所在函数执行完所有的代码之后,会自动执行defer的这个函数。 示例一(...

30780
来自专栏开源优测

使用CSS选择器进行元素定位

在selenium webdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位的时候,使用css 和 xpath才...

29450
来自专栏web前端

JavaScript基础学习--10 return、定时器基础

Demos:   https://github.com/jiangheyan/JavaScriptBase 一、return      1、返回值:数字、字...

20560
来自专栏我的博客

DOM基础知识

1.DOM介绍 DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话...

30940
来自专栏mySoul

js 和 css动画

使用setTimeout()或者setInterval()使用这两个函数定时调用一段代码。这是其原理。

27960
来自专栏Golang语言社区

Go-defer,panic,recover

defer 语法: defer function_name() 简单来讲,在defer所在函数执行完所有的代码之后,会自动执行defer的这个函数。 示例一(...

380130
来自专栏菜鸟计划

vue内置指令详解——小白速会

指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。 内置指令 1、v-bin...

40750
来自专栏Coco的专栏

【深入浅出jQuery】源码浅析--整体架构

15330

扫码关注云+社区

领取腾讯云代金券