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

vue父组件向子组件动态传值的两种方法相关推荐

java数组循环扩容_Java中实现数组动态扩容的两种方法
Java中实现数组动态扩容的两种方法 java中初始化一个数组需要定义数组的容量,而在我们使用数组时往往会遇到数组容量不够的情况,此时我们就需要通过动态扩容的方式来来根据需求扩大数组的容量. 我们可以 ...
android fragment传递参数_fragment之间传值的两种方法
在Activity中加载Fragment的时候.有时候要使用多个Fragment切换.并传值到另外一个Fragment.也就是说两个Fragment之间进行参数的传递.查了很多资料.找到两种方法.一种 ...
matlab 图像转视频教程,Matlab制作视频并转换成gif动态图的两种方法
一.第一个方法比较简单,就是使用movie(f)直接取生成AVI视频文件. %% f(t)-->f(4*t+12) 并且验证%% function Signal_change() tic%记录程 ...
vue 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
vue 父链和子组件索引_vuejs填坑-父子组件之间的访问
有时候我们需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 1. 父组件访问子组件 $children或$ref $children 返回所有子组件的实例,是一个数组显示两个组件的信 ...
Vue中父子组件之间传值，兄弟组件之间传值（两种方法）
一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...
vue 获取请求url_vue 获取url里参数的两种方法小结
我就废话不多说了,大家还是直接看代码吧~ 第一种: const query = Qs.parse(location.search.substring(1)) let passport = query. ...
vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例模仿v-model实现案例我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例这是父组件的东西.利用这个框改变值,看看有没 ...
vue 父链和子组件索引_Vue.js 学习笔记第7章组件详解
组件(Component)是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 本章将带领你由浅入深地学习组件的全部内容,并通过几个实战项目熟练使用Vue组件. 7.1 组件 ...

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

vue父组件向子组件动态传值的两种方法相关推荐

最新文章

热门文章