Vue2.0 饿了么报错：Avoid mutating a prop directly since the value will be overwritten whenever

最新推荐文章于 2024-09-06 10:38:18 发布

原创最新推荐文章于 2024-09-06 10:38:18 发布 · 9.6w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#Vue2.0

前端错误记录汇总专栏收录该内容

3 篇文章

订阅专栏

本文探讨了Vue.js中单向数据流的概念，解释了为什么子组件不能直接修改父组件通过Prop传递的值，并提供了解决方案。通过定义本地data属性并使用Prop作为初始值，可以实现组件状态的更新，同时确保数据流的正确性。

报错原因：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。（父组件更新，子组件中的prop值也会更新，但子组件不能修改由父组件传递过来的值）

解决办法：

定义一个本地的 data 属性并将这个 prop 用作其初始值，同步对组件的修改，再通知父组件更新

相关代码：

<div class="rating-type">
  <span @click="select(2,$event)" class="block positive" :class="{'active': selectedtype === 2}">{{desc.all}}
    <span class="count">47</span>
  </span>
  <span @click="select(0,$event)" class="block positive" :class="{'active': selectedtype === 0}">{{desc.positive}}
    <span class="count">50</span>
  </span>
  <span @click="select(1,$event)" class="block negative" :class="{'active': selectedtype === 1}">{{desc.negative}}
    <span class="count">47</span>
  </span>
</div>

子组件：

data() {
  return {
    typeSelected: this.selectType,
    contOnly: this.onlyContent
  };
},
methods: {
  select(type, event) {
    if (!event._constructed) {
      return;
    }
    this.typeSelected = type;
    this.$emit('change', type);
  },
  toggleContent(event) {
    if (!event._constructed) {
      return;
    }
    this.contOnly = !this.contOnly;
    this.$emit('toggle', this.contOnly);
  }
}

父组件：

<ratingselect :select-type="selectType" :only-content="onlyContent"
:desc="desc" :ratings="food.ratings"
 @change="change" @toggle="toggle"></ratingselect>

methods: {
  //  子组件更新的值
  change(type) {
    this.selectType = type;
  },
  toggle(val) {
    this.onlyContent = val;
  },
  //  子组件更新的值==结束

效果图：

官方文档链接：https://cn.vuejs.org/v2/guide/components-props.html