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

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片

方法有两种,

方法一:

props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组

rush:js;"> timage" size="750px*750px" ref="productimage" :src-list="this.productimage">
rush:js;"> this.productimage=res.data.cover;

这里把通过后台返回的数组赋值给

this.productimage,然后把该数组传给子组件定义的props属性src-list

子组件:

rush:js;"> watch:{ srcList(curVal,oldVal){ if(curVal){ ; this.uploadImg=curVal; } },}

然后子组件成功获取到该数组

方法二:

通过ref属性,父组件调用子组件的方法,把要传的数组作为参数传给子组件,子组件获取该参数,并使用

父组件:

rush:js;"> this.$refs.productimage.getSrcList(res.data.cover);

子组件:

rush:js;"> getSrcList(val){ this.uploadImg=val; }

PS:下面看下vuejs动态组件给子组件传递数据

通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在 中进行绑定

rush:js;">
dob.sync="dob">

组件的作用于是独立的

组件的作用于是独立的,如果要从跟组件获取数据,那么需要一层层的传递才行,也就是说子组件只能从直接父组件获取数据,如果是根组件的数据,那么父组件就要继续暴露pops从而绑定来自根组件的数据。

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...