Prop being mutated: "counter"

对于父子组件之间的互相传值，报错如下：

[Vue warn]: 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: “counter”

大概意思是：避免直接更改一个PROP，因为每当父组件重新呈现时，该值就会被覆盖。

解决办法：

不要直接引用父组件传过来的值，可以把接收到的父组件的值赋值给一个新的参数

父组件

<template>
  <div class="wrap">
      <Temp :counter="counte" :max="10" :min="0" @reduceInner="reduceWrap" @addInner = 'addWrap'></Temp>
   </div>
 </template>
<script>
import Temp from '../components/temp'
import TempA from '../components/tempA'
export default {
  name: 'practice',
  components: { Temp, TempA },
  data () {
    return {
      counte: 5
    }
  },
  methods: {
    reduceWrap(val) {
      this.counte = val
    },
    addWrap(val) {
      this.counte = val
    }

  }
}
</script>

子组件

<template>
  <div class="wrapInner">
    <el-row>
      <el-col :span="12"><el-input v-model="cum" :max="max" :min="min"></el-input></el-col>
      <el-col :span="3"><el-button @click="reduce">-</el-button></el-col>
      <el-col :span="3"><el-button @click="add">+</el-button></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'temp',
  props: {
    counter: {
      type: Number
    },
    max: {
      type: Number
    },
    min: {
      type: Number
    }
  },
  data: function () {
    return {
      cum: this.counter
    };
  },
  computed: {

  },
  methods: {
    reduce() {
      this.cum--;
      this.$emit('reduceInner', this.cum)
    },
    add () {
      this.cum++;
      this.$emit('addInner', this.cum)
    }
  }
};
</script>