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

 报错原因:

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

 解决办法:

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

相关代码:

{{desc.all}} 47 {{desc.positive}} 50 {{desc.negative}} 47

 子组件:

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);
  }
}

父组件:

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

效果图:

Vue2.0 饿了么报错:Avoid mutating a prop directly since the value will be overwritten whenever_第1张图片

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

你可能感兴趣的:(前端错误记录汇总,Vue2.0)