我們都知道，組件之間通過props 或者 $emit 傳值都是單向數(shù)據(jù)流的。如果我們想實(shí)現(xiàn)雙向數(shù)據(jù)流的話，我們通常的做法如下：

//父組件給子組件傳入一個函數(shù)
 <MyFooter :age="age" @setAge="(res)=> age = res">
 </MyFooter>
 
 
 
 
 //子組件通過調(diào)用這個函數(shù)來實(shí)現(xiàn)修改父組件的狀態(tài)。
 mounted () {
      console.log(this.$emit('setAge',1234567));
 }
 

這時子組件觸發(fā)了父組件的修改函數(shù)使父組件的age修改成了1234567

但是這種寫法又稍微有點(diǎn)復(fù)雜，其實(shí)我們可以使用 .sync 如下直接寫：

//父組件將age傳給子組件并使用.sync修飾符。
<MyFooter :age.sync="age">
</MyFooter>




//子組件觸發(fā)事件
 mounted () {
    console.log(this.$emit('update:age',1234567));
 }

這樣就很簡單的實(shí)現(xiàn)了，數(shù)據(jù)的雙向流。

這里注意我們的事件名稱被換成了<font color=red >update:age</font>
update：是被固定的也就是vue為我們約定好的名稱部分
age是我們要修改的狀態(tài)的名稱，是我們手動配置的，與傳入的狀態(tài)名字對應(yīng)起來

這樣就完成了，是不是感覺簡單了很多。

注意事項(xiàng)：
這里我們必須在事件執(zhí)行名稱前加上update：的前綴才能正確觸發(fā)事件。