美文网首页
vue组件父传子,子组件改变父组件也改变

vue组件父传子,子组件改变父组件也改变

作者: SeekLife0 | 来源:发表于2022-10-15 17:22 被阅读0次

参考:
(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
    }

相关文章

网友评论

      本文标题:vue组件父传子,子组件改变父组件也改变

      本文链接:https://www.haomeiwen.com/subject/zhfkzrtx.html