Vue从零开始总结27

父传子，子传夫两个单独的功能我们已经实现了，那么有没有发现一个问题，如果我们在子组件里面动态绑定父组件，并更改它的值，父组件里面的数据时不变的，那么为了解决这个问题，我们先剖析一下解决方案的原理，然后再进行简化。

第一步：先搞定子组件内部数据双向绑定

老样子，先写模板

<template id="son">
 <div>
   <h2>{{sonnum1}}</h2>//父组件传过来的值
   <h2>{{sonNum1}}</h2>//子组件内部key
   <input type="text" :value="sonNum1" @input="inputnum1">
   <h2>{{sonnum2}}</h2>//父组件传过来的值

   <h2>{{sonNum2}}</h2>//子组件内部key

   <input type="text" :value="sonNum2" @input="inputnum2">
 </div>
</template>

第二步：确立父子关系，将父值传递给子值，然后再将props传过来的子值，赋初值给子组件的data中相应key。

//父

const app=new Vue({
   el:document.querySelector('#app'),
   data:{

//父组件中的值
   num1:0,
   num2:1
}, components:{

//子
     cpn:{
       template: '#son',
       data(){

//子组件中的key
         return {
         sonNum1:this.sonnum1,
           sonNum2:this.sonnum2
         }
       },
       props:{

//接受父组件传递过来的值
         sonnum1:Number,
         sonnum2:Number
       },
       methods:{
         inputnum1(event){

//通过input事件，接受动态绑定过来的值。注意要保持前后一致，即都是sonNum1
         this.sonNum1=event.target.value
         }
         ,
         inputnum2(event){
         this.sonNum2=event.target.value
         }
       }
     }
 }
})

<div id="app">

//对应接收父组件传值
<cpn :sonnum1="num1" :sonnum2="num2"></cpn>
</div>

做到这儿效果如下：

第三步：改变的数据，以事件的形式，通过子组件里面的函数，发送给父组件

methods:{
 inputnum1(event){
 this.sonNum1=event.target.value//通过input事件传递过来的事件，获取其动态获取的value值并赋值给子组件data中的指定变量
   this.$emit('sendnum1',this.sonNum1)//将这个改变了的值，以事件sendnum1发送给父组件里指定函数

 }
 ,
 inputnum2(event){
 this.sonNum2=event.target.value
   this.$emit('sendnum2',this.sonNum2)
 }
}

第四步:在子组件标签行内书写自定义事件，并将这个事件指定到对应父组件函数内

<div id="app">
<cpn :sonnum1="num1" :sonnum2="num2" @sendnum1="changenum1" @sendnum2="changenum2"></cpn>
</div>

至此实现了，父子数据的相互绑定

效果如下：

通过input输入的默认为String类型

所以为了防止报错，就得进行类型转换

inputnum1(event){
this.sonNum1=parseInt(event.target.value)
 this.$emit('sendnum1',this.sonNum1)
}
,
inputnum2(event){
this.sonNum2=parseInt(event.target.value)
 this.$emit('sendnum2',this.sonNum2)
}