当前位置：凯发ag旗舰厅登录网址下载 > 前端技术 > vue >内容正文

vue

vue父组件向子组件动态传值的两种方法 -凯发ag旗舰厅登录网址下载

发布时间：2023/12/2 vue 31 豆豆

凯发ag旗舰厅登录网址下载收集整理的这篇文章主要介绍了 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

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的vue父组件向子组件动态传值的两种方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。