vue页面报错 Avoid mutating a prop directly since the value will be overwritten

大致意思就是说：不能直接去改变props的值，因为这个值在父组件重新render的时候有可能被改变。所以我们需要用基于props的data或者computed属性来fix这个问题。
后面这一句解决方案听不懂也没有关系，下面我们用一个小demo来说明这个问题。

父组件

<mp-dialog :step="step"> </mp-dialog>

子组件 js文件

Vue.component('mp-dialog', {
  template: '<button @click="changeStep">clicked me {{ step }}</button>'
  props: {
    step: {
      type: Number,
      default: 1
    },
  },
  data: function () {
    return {
    
    }
  },
  methods: {
    changeStep() {
      this.step = this.step + 1  
    }
  }
})

以上这个demo里， 我们从父组件传入一个值step 给子组件，然后子组件在自己内部通过changeStep对这个外部传入的props进行了修改。这种情况就会出现我们上图看到的报错。

如何解决？

这里我们根据vue给出的提示，用传入的props给data里的stepInner赋初始值，然后只改变这个stepInner的值。

父组件不变
子组件

Vue.component('mp-dialog', {
  template: '<button @click="changeStep">clicked me {{ stepInner }}</button>'
  props: {
    step: {
      type: Number,
      default: 1
    },
  },
  data: function () {
    return {
      // 新增代码
      stepInner: this.step, 
    }
  },
  methods: {
    changeStep() {
      this.stepInner = this.stepInner + 1  
    }
  }
})

通过这个新增的stepInner 就可以轻松解决我们的问题。或者在watch里加入step，当值有变化的时候，赋值给stepInner即可。

子组件watch

Vue.component('mp-dialog', {
  template: '<button @click="changeStep">clicked me {{ stepInner }}</button>'
  props: {
    step: {
      type: Number,
      default: 1
    },
  },
  data: function () {
    return {
      // 新增代码
      stepInner: this.step, 
    }
  },
  watch: {
    step(val) {
      this.stepInner = val;
    }
  },
  methods: {
    changeStep() {
      this.stepInner = this.stepInner + 1  
    }
  }
})