(复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案

报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component........

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

不能直接对父组件传来的值进行双向绑定，要先子组件里定义新的变量来接收父组件传来的值，接着我们可以使用v-modal+watch属性 或者 使用:binfd="" + @input=" func"(再定义这个func通过传入的event 得到改变的值，将event.target.value赋值给新变量)

   <div id="app">
     <h3>我是父组件</h3>
     <templ :num-from-father="fatherData"
     :num-from-father2="fatherData2"
     @change1="changeFunc1"
     @change2="changeFunc2"/>
   </div>
 
   <template id="temp">
     <div>
       <h3>我是子组件</h3>
       <p>props1:{{numFromFather}}</p>
       <p>转存的值:{{receiveNum1}}</p>
       <!-- 方法1  -->
       <input type="number" :bind="receiveNum1" @input="receiveNum1Input">
       <p>props2:{{numFromFather2}}</p>
       <p>转存的值:{{receiveNum2}}</p>
       <!-- 方法2 使用watch  -->
       <input type="number" v-model="receiveNum2">
     </div>
   </template>
   <script src="/js/vue.js"></script>
   <script>
     const vm = new Vue({
       el:'#app',
       data:{
         fatherData:0,
         fatherData2:10
       },
       methods: {
         changeFunc1(value){
           this.fatherData = value*1;
         },
         changeFunc2(value){
           this.fatherData2 = value*1;
         }
       },
       components:{
         templ:{
           template:'#temp',
           props:{
             numFromFather:Number,
             numFromFather2:Number,
           },
           data(){
             return{
               receiveNum1:this.numFromFather,
               receiveNum2:this.numFromFather2,
             }
           },
           methods: {
             receiveNum1Input(event){
               this.receiveNum1 = event.target.value;
               this.$emit('change1',this.receiveNum1);
               this.receiveNum2 = this.receiveNum1*100;
               this.$emit('change2',this.receiveNum2);
             }
           },
           watch: {
             receiveNum2(newValue){
               this.receiveNum2 = newValue;
               this.$emit('change2',this.receiveNum2);
               this.receiveNum1 = this.receiveNum2/100;
               this.$emit('change1',this.receiveNum1);
             }
           },
         }
       }
     })
   </script>