一般來(lái)說(shuō)我們實(shí)現(xiàn)這個(gè)功能，只需要父組件通過(guò) props 傳遞給子組件就好了，但是理想很豐滿(mǎn)，現(xiàn)實(shí)很骨感，如果我們直接在子組件更改傳進(jìn)來(lái)的 props ，不出意外瀏覽器會(huì)給你一坨大紅色的報(bào)錯(cuò)，因?yàn)樵赩ue中我們的數(shù)據(jù)流動(dòng)是自上而下的，而子組件直接更改父組件傳來(lái)的 props 則是自下而上的數(shù)據(jù)流動(dòng)，這是Vue不允許的。

所以通常我們的解決辦法是，父組件通過(guò) props 傳入狀態(tài)給子組件，子組件通過(guò) props 來(lái)初始化另外一個(gè)內(nèi)部的狀態(tài)，子組件每次更改狀態(tài)之后都通知父組件，然后由父組件來(lái)更改自己的狀態(tài)，其實(shí)就是 props on emit 的應(yīng)用，接下來(lái)我們來(lái)上代碼。

父組件 Father.vue

<template> 
 <div class="father"> 
        <h1>父組件維護(hù)的狀態(tài)：{{food}}</h1> 
        <son :food="food" @update:food="f => food = f"></son> 
    </div> 
</template> 

子組件 Son.vue

<template> 
 <div class="son"> 
        <h2>子組件中維護(hù)的狀態(tài)：{{innerFood}}</h2> 
        <button @click="innerFood = '100斤牛肉'">點(diǎn)擊更改子組件狀態(tài)</button> 
    </div> 
</template> 
<script> 
 export default { 
        data () { 
          return { 
              innerFood: this.food 
          }   
        }, 
        props: { 
            food: String 
        }, 
        watch: { 
            innerFood (nv) { 
                this.$emit("update:food",nv) 
            } 
        } 
    } 
</script> 

可以看到我們上述的寫(xiě)法，其實(shí)是維護(hù)了父子組件中的不同的兩個(gè)狀態(tài)，我們做的工作只是將這兩個(gè)狀態(tài)同步了，這種寫(xiě)法沒(méi)有任何問(wèn)題，其實(shí)對(duì)于子組件的部分我們也可以通過(guò) computed 來(lái)實(shí)現(xiàn)，下面我們來(lái)看一看另一種子組件內(nèi)維護(hù)同步狀態(tài)的方法：

子組件 Son.vue 的另一種寫(xiě)法

<template> 
 <div class="son"> 
        <h2>子組件中維護(hù)的狀態(tài)：{{innerFood}}</h2> 
        <button @click="innerFood = '100斤牛肉'">點(diǎn)擊更改子組件狀態(tài)</button> 
    </div> 
</template> 
<script> 
 export default { 
        props: { 
            food: String 
        }, 
        computed: { 
            innerFood: { 
                get () { 
                    return this.food 
                }, 
                set (nv) { 
                    this.$emit("update:food",nv) 
                } 
            } 
        } 
    } 
</script> 

好了，兩種寫(xiě)法我們都已經(jīng)演示完畢，現(xiàn)在我們來(lái)優(yōu)化一下父組件中的寫(xiě)法。

父組件中可以看到我們之前在上面綁定了一個(gè) update:food 事件，并且使用箭頭函數(shù)做了一個(gè)賦值，其實(shí)這里我們可以稍微優(yōu)化一下，不要箭頭函數(shù)直接賦值，因?yàn)槲覀冇|發(fā)的是自定義事件，而我們觸發(fā)的時(shí)候給的第一個(gè)參數(shù)就是新值，我們可以直接通過(guò) $event 拿到這個(gè)值，所以可以寫(xiě)成如下形式：

優(yōu)化后的父組件

<template> 
 <div class="father"> 
        <h1>父組件維護(hù)的狀態(tài)：{{food}}</h1> 
        <son :food="food" @update:food="food = $event"></son> 
    </div> 
</template> 

到這里你以為就結(jié)束了？其實(shí)我們還可以更近一步，只要滿(mǎn)足我們以上的事件命名方式，我們實(shí)際上可以使用 sync 修飾符代替事件的綁定，也就是我們不用寫(xiě)事件綁定了，但是子組件內(nèi)部的事件觸發(fā)依然不能少，最終優(yōu)化的結(jié)果如下：

<template> 
 <div class="father"> 
        <h1>父組件維護(hù)的狀態(tài)：{{food}}</h1> 
        <son :food.sync="food"></son> 
    </div> 
</template> 

到此我們就真的完成了父子組件的同步，當(dāng)然在子組件中維護(hù)一個(gè)狀態(tài)不一定是必須的，如果我們只用父組件傳給我們的 props 做展示，而子組件沒(méi)有對(duì)這個(gè) props 直接更改的行為，那么我們就不用在子組件創(chuàng)建另外一個(gè)狀態(tài)，我們子組件想改他的時(shí)候只需要在合適的時(shí)機(jī)提交合適的事件即可，但是有一種情況我們不得不在子組件中創(chuàng)建另一個(gè)狀態(tài)，就是我們父組件傳入的狀態(tài)在子組件中用于 v-model 這種雙向數(shù)據(jù)綁定的功能時(shí)，由于 v-model 會(huì)自動(dòng)更改值所以直接填入從父組件接受的 props 就不合適了。