Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

##解决报错： Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

Vue 父传子，在子组件中直接修改父组件传递过来的值就会[Vue warn]，Prop 是单向绑定的，父组件的属性变化，将会传递给子组件，但是反之则不然。

解决办法：
父组件传下来的值不要在子组件中直接修改，将要更改的值，$emit传递给父组件，在父组件中更改，再传递给子组件就ok了

简单的demo：

父组件：

 <Child :number = "number" @addFun = "addParent" @delFun = "delParent"></Child>

<script>
import Child from "@/components/Child.vue"
export default {
    components: {
        Child
    },
    data() {
        return {
            number: 5,
        }
    },
    methods: {
        addParent() {
            this.number ++;
        },
        delParent(){
            this.number --;
        }
    },
   
}
</script>

子组件：

<template>
    <div class="child_box">
        <div>父传子，子传父demo:</div> 
        <div> {{ number }} </div>   
        <button @click = "add"> + </button>
        <button @click = "del"> - </button>
    </div>
    
</template>

<script>
export default {
    props: ["number"],  //接收父组件传递过来的参数number
    methods: {
        add(){
            this.$emit("addFun");
        },
        del(){
            this.$emit("delFun");
        }
    }
}
</script>