建立免费网站,aspcms中英文双语网站,wordpress网站搭建教程,钢材网站建设在一些项目需求中需要父组件向子组件动态传值#xff0c;比如我这里的需求是#xff0c;父组件动态通过axios获取返回的图片url数组然后传给子组件#xff0c;上传图片的子组件拿到该数组后进行遍历并展示图片#xff0c;因为有时候获取到的会是空#xff0c;所以这里要考…在一些项目需求中需要父组件向子组件动态传值比如我这里的需求是父组件动态通过axios获取返回的图片url数组然后传给子组件上传图片的子组件拿到该数组后进行遍历并展示图片因为有时候获取到的会是空所以这里要考虑到动态获取。
方法有两种
方法一
props传值这里注意一个问题传过来的值需要用watch监听并赋值否则这里获取到的是空数组 父组件 uploadImg :width200 :height200 nameproductImage size750px*750px refproductImage :src-listthis.productImage/uploadImg this.productImageres.data.cover; 这里把通过后台返回的数组赋值给
this.productImage然后把该数组传给子组件定义的props属性src-list
子组件 watch:{srcList(curVal,oldVal){if(curVal){this.uploadImgcurVal;}},
} 然后子组件成功动态获取到该数组 方法二
通过ref属性父组件调用子组件的方法把要传的数组作为参数传给子组件子组件获取该参数并使用
父组件 this.$refs.productImage.getSrcList(res.data.cover); 子组件 getSrcList(val){this.uploadImgval;
} 同理子组件向父组件传值如果是动态改变的也要记得加watch函数动态改变之后执行的操作写在watch里比如 this.$emit 的函数
见子组件向父组件传值
更多专业前端知识请上
【猿2048】www.mk2048.com
