是否還有人記得，雙向綁定里有個可愛的v-model啊！以后就管她叫小棉襖了。

剛才通過底層，兩步才實現(xiàn)了小棉襖的功能，下面回顧一下。

第一步：通過：value動態(tài)獲取你輸入的值；

第二步：通過@input這個監(jiān)聽事件，把動態(tài)獲取的value又通過event.target.value賦值給了子組件data中的數(shù)據(jù)。并將它以自定義事件的方式發(fā)送給了父組件，在子組件的標簽上，監(jiān)聽自定義事件，把它連帶參數(shù)值，一起傳給了父組件的函數(shù)，父組件的函數(shù)通過參數(shù)直接獲取值，并通過這個值改變了傳遞給子組件數(shù)據(jù)的值，實現(xiàn)了雙向綁定。

聽起來是不是很繞，沒關(guān)系，你們的小棉襖來救你們了！

下面，開始簡化，老樣子。

第一步：先弄模板

<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>

第二步：確立父子關(guān)系，接收父組件值，子組件中使用watch函數(shù)監(jiān)聽相關(guān)數(shù)值改變，參數(shù)為變化之后的數(shù)值，這里寫成newValue，之前的通過input事件獲取--event.target.value就可以替換成newValue，然后發(fā)送事件帶給父組件的參數(shù)值，也換成newValue就行了，剩下的一樣，通過自定義事件，傳遞給父組件的函數(shù)，然后再通過父組件的函數(shù)，改變父組件內(nèi)部的數(shù)值，最終實現(xiàn)雙向綁定。

const app=new Vue({
? ?el:document.querySelector('#app'),
? ?data:{
? ?num1:0,//父組件中的數(shù)值
? ?num2:1
}, components:{
? ? ?cpn:{
? ? ? ?template: '#son',
? ? ? ?data(){
? ? ? ? ?return {
? ? ? ? ?sonNum1:this.sonnum1,//子組件data中的key
? ? ? ? ? ?sonNum2:this.sonnum2
? ? ? ? ?}
? ? ? ?},
? ? ? ?props:{//父傳子
? ? ? ? ?sonnum1:Number,//接收父組件數(shù)據(jù)，即父組件傳遞過來的數(shù)據(jù)
? ? ? ? ?sonnum2:Number
? ? ? ?},
? ? ? ?watch:{//監(jiān)聽子組件data中的key值是否改變
? ? ? ? sonNum1(newValue){//若有改變則為newValue，若是為空則為NAN
? ? ? ? ?this.sonNum1=parseInt(newValue)//將子組件data中的key值賦值為newValue
? ? ? ? ? ?this.$emit('sendnum1',newValue)//將newValue與自定義事件封裝一起發(fā)送給父組件
? ? ? ? ?}
? ? ? ? ?,
? ? ? ? ?sonNum2(newValue){
? ? ? ? ? ?this.sonNum2=parseInt(newValue)
? ? ? ? ? ?this.$emit('sendnum2',newValue)//子傳父
? ? ? ? ?}
? ? ? ?}
? ? ?}
?},
?methods: {

//父組件中負責(zé)接收的兩個函數(shù)，作用是把父組件中與子組件中綁定的數(shù)值進行匹配
? ? ?changenum1(sonNum1){
? ? ? ?this.num1=sonNum1
? ? ?},
? ? ?changenum2(sonNum2){
? ? ? ?this.num2=sonNum2
? ? ?}
?}

})

<div id="app">
<cpn :sonnum1="num1" :sonnum2="num2" @sendnum1="changenum1" @sendnum2="changenum2">//通過監(jiān)聽自定義事件，將事件連帶參數(shù)，一起發(fā)送給父組件負責(zé)接收的函數(shù)，并使用

</cpn>
</div>