Vue从零开始总结28

是否还有人记得，双向绑定里有个可爱的v-model啊！以后就管她叫小棉袄了。

刚才通过底层，两步才实现了小棉袄的功能，下面回顾一下。

第一步：通过：value动态获取你输入的值；

第二步：通过@input这个监听事件，把动态获取的value又通过event.target.value赋值给了子组件data中的数据。并将它以自定义事件的方式发送给了父组件，在子组件的标签上，监听自定义事件，把它连带参数值，一起传给了父组件的函数，父组件的函数通过参数直接获取值，并通过这个值改变了传递给子组件数据的值，实现了双向绑定。

听起来是不是很绕，没关系，你们的小棉袄来救你们了！

下面，开始简化，老样子。

第一步：先弄模板

<template id="son">
 <div>
   <h2>{{sonnum1}}</h2>
   <h2>{{sonNum1}}</h2>
   <input type="text" v-model="sonNum1">//子组件data中的key
   <h2>{{sonnum2}}</h2>
   <h2>{{sonNum2}}</h2>
   <input type="text" v-model="sonNum2">
 </div>
</template>

第二步：确立父子关系，接收父组件值，子组件中使用watch函数监听相关数值改变，参数为变化之后的数值，这里写成newValue，之前的通过input事件获取--event.target.value就可以替换成newValue，然后发送事件带给父组件的参数值，也换成newValue就行了，剩下的一样，通过自定义事件，传递给父组件的函数，然后再通过父组件的函数，改变父组件内部的数值，最终实现双向绑定。

const app=new Vue({
   el:document.querySelector('#app'),
   data:{
   num1:0,//父组件中的数值
   num2:1
}, components:{
     cpn:{
       template: '#son',
       data(){
         return {
         sonNum1:this.sonnum1,//子组件data中的key
           sonNum2:this.sonnum2
         }
       },
       props:{//父传子
         sonnum1:Number,//接收父组件数据，即父组件传递过来的数据
         sonnum2:Number
       },
       watch:{//监听子组件data中的key值是否改变
        sonNum1(newValue){//若有改变则为newValue，若是为空则为NAN
         this.sonNum1=parseInt(newValue)//将子组件data中的key值赋值为newValue
           this.$emit('sendnum1',newValue)//将newValue与自定义事件封装一起发送给父组件
         }
         ,
         sonNum2(newValue){
           this.sonNum2=parseInt(newValue)
           this.$emit('sendnum2',newValue)//子传父
         }
       }
     }
 },
 methods: {

//父组件中负责接收的两个函数，作用是把父组件中与子组件中绑定的数值进行匹配
     changenum1(sonNum1){
       this.num1=sonNum1
     },
     changenum2(sonNum2){
       this.num2=sonNum2
     }
 }

})

<div id="app">
<cpn :sonnum1="num1" :sonnum2="num2" @sendnum1="changenum1" @sendnum2="changenum2">//通过监听自定义事件，将事件连带参数，一起发送给父组件负责接收的函数，并使用

</cpn>
</div>