参考:
(41条消息) vue 父子组件传值 子组件修改父组件值的解决办法大懒猫呀的博客-CSDN博客子组件改变父组件传来的值
举例:
定义组件:
这里v-model会传值到子组件名为value的props属性中
<single-pic v-model="formValidate.vrCoverUrl" type="image" :num="1" :width="150" :height="150" @pic-select="picSelect"/>
子组件定义props
props: {
// 素材数据
imgSize: {
type: Boolean,
default: true
},
value: {
type: String
},
// 素材类型
type: {
type: String
},
// 素材限制数量,默认5个
num: {
type: Number,
default() {
return 5
}
},
// 宽度
width: {
type: Number,
default() {
return 150
}
},
// 宽度
height: {
type: Number,
default() {
return 150
}
}
}
子组件定义计算属性
computed: {
picValue: {
get() {
return this.value
},
set(val) {
this.$emit('pic-select', val)
}
}
}
父组件定义方法
//封面图片子传父
picSelect(val){
console.log('子组件传过来的值',val)
this.formValidate.vrCoverUrl = val
}
网友评论