一般來說我們實現(xiàn)這個功能，只需要父組件通過 props 傳遞給子組件就好了，但是理想很豐滿，現(xiàn)實很骨感，如果我們直接在子組件更改傳進來的 props ，不出意外瀏覽器會給你一坨大紅色的報錯，因為在Vue中我們的數(shù)據(jù)流動是自上而下的，而子組件直接更改父組件傳來的 props 則是自下而上的數(shù)據(jù)流動，這是Vue不允許的。

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

父組件 Father.vue

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

子組件 Son.vue

<template> 
 <div class="son"> 
        <h2>子組件中維護的狀態(tài)：{{innerFood}}</h2> 
        <button @click="innerFood = '100斤牛肉'">點擊更改子組件狀態(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> 

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

子組件 Son.vue 的另一種寫法

<template> 
 <div class="son"> 
        <h2>子組件中維護的狀態(tài)：{{innerFood}}</h2> 
        <button @click="innerFood = '100斤牛肉'">點擊更改子組件狀態(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> 

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

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

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

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

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

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

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