父?jìng)髯樱觽鞣騼蓚€(gè)單獨(dú)的功能我們已經(jīng)實(shí)現(xiàn)了，那么有沒(méi)有發(fā)現(xiàn)一個(gè)問(wèn)題，如果我們?cè)谧咏M件里面動(dòng)態(tài)綁定父組件，并更改它的值，父組件里面的數(shù)據(jù)時(shí)不變的，那么為了解決這個(gè)問(wèn)題，我們先剖析一下解決方案的原理，然后再進(jìn)行簡(jiǎn)化。

第一步：先搞定子組件內(nèi)部數(shù)據(jù)雙向綁定

老樣子，先寫(xiě)模板

<template id="son">
?<div>
? ?<h2>{{sonnum1}}</h2>//父組件傳過(guò)來(lái)的值
? ?<h2>{{sonNum1}}</h2>//子組件內(nèi)部key
? ?<input type="text" :value="sonNum1" @input="inputnum1">
? ?<h2>{{sonnum2}}</h2>//父組件傳過(guò)來(lái)的值

? ?<h2>{{sonNum2}}</h2>//子組件內(nèi)部key

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

第二步：確立父子關(guān)系，將父值傳遞給子值，然后再將props傳過(guò)來(lái)的子值，賦初值給子組件的data中相應(yīng)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:{

//接受父組件傳遞過(guò)來(lái)的值
? ? ? ? ?sonnum1:Number,
? ? ? ? ?sonnum2:Number
? ? ? ?},
? ? ? ?methods:{
? ? ? ? ?inputnum1(event){

//通過(guò)input事件，接受動(dòng)態(tài)綁定過(guò)來(lái)的值。注意要保持前后一致，即都是sonNum1
? ? ? ? ?this.sonNum1=event.target.value
? ? ? ? ?}
? ? ? ? ?,
? ? ? ? ?inputnum2(event){
? ? ? ? ?this.sonNum2=event.target.value
? ? ? ? ?}
? ? ? ?}
? ? ?}
?}
})

<div id="app">

//對(duì)應(yīng)接收父組件傳值
<cpn :sonnum1="num1" :sonnum2="num2"></cpn>
</div>

做到這兒效果如下：

第三步：改變的數(shù)據(jù)，以事件的形式，通過(guò)子組件里面的函數(shù)，發(fā)送給父組件

methods:{
?inputnum1(event){
?this.sonNum1=event.target.value//通過(guò)input事件傳遞過(guò)來(lái)的事件，獲取其動(dòng)態(tài)獲取的value值并賦值給子組件data中的指定變量
? ?this.$emit('sendnum1',this.sonNum1)//將這個(gè)改變了的值，以事件sendnum1發(fā)送給父組件里指定函數(shù)

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

第四步:在子組件標(biāo)簽行內(nèi)書(shū)寫(xiě)自定義事件，并將這個(gè)事件指定到對(duì)應(yīng)父組件函數(shù)內(nèi)

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

至此實(shí)現(xiàn)了，父子數(shù)據(jù)的相互綁定

效果如下：

通過(guò)input輸入的默認(rèn)為String類(lèi)型

所以為了防止報(bào)錯(cuò)，就得進(jìn)行類(lèi)型轉(zhuǎn)換

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