vue2组件中props值改变报错

最新推荐文章于 2024-07-01 10:23:22 发布

山中妖怪

最新推荐文章于 2024-07-01 10:23:22 发布

阅读量479

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_36362979/article/details/119643502

版权

报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "imgUrl"

解决：子组员去通知父组件改变props值，不能直接在子组件内更改

错误：

<!-- 子组件 -->
<img
  v-if="imgUrl !== ''"
  :src="imgUrl"
  class="avatar"
  @click="resource"
/>

props: {
  imgUrl: {
    type: String,
    default: "",
  },
}，

methods： {
  saveResource() {
    this.imgUrl = ""
    this.resourceDialog = false;
    this.$emit("libraryObj", this.resourceObj);
  },
}

<!-- 父组件 -->
<library
  :libraryType="libraryType"
  :isFixed="isFixed"
  :imgUrl="imgUrl"
  :imgHint="imgHint"
  imgWidth="414px"
  imgHeight="196px"
  v-on:libraryObj="libraryObj"
></library>

libraryObj(obj) {
  this.formObj.imageUrl = obj.imgUrl;
},

正确：

<!-- 子组件 -->
<img
  v-if="imgUrl !== ''"
  :src="imgUrl"
  class="avatar"
  @click="resource"
/>

props: {
  imgUrl: {
    type: String,
    default: "",
  },
}，

methods： {
  saveResource() {
    this.resourceDialog = false;
    this.$emit("libraryObj", this.resourceObj);
  },
}

<!-- 父组件 -->
<library
  :libraryType="libraryType"
  :isFixed="isFixed"
  :imgUrl="imgUrl"
  :imgHint="imgHint"
  imgWidth="414px"
  imgHeight="196px"
  v-on:libraryObj="libraryObj"
></library>

libraryObj(obj) {
  this.formObj.imageUrl = obj.imgUrl;
  this.imgUrl= obj.imgUrl;
},

也就是说子组件不对props值做任何修改，全部由父组件来赋值