> 哈嘍！大家好！我是木瓜太香，一位老牌兒前端工程師，平時我們在使用 vue 開發的時候，可能會遇到需要父元件與子元件某個狀態需要同步的情況，通常這個是因為我們封裝元件的時候有一個相同的狀態外面要用，裡面也要用，今天我們就來看看怎麼優雅的解決這個問題吧! 一般來說我們實現這個功能，只需要父元件通過 `props` 傳遞給子元件就好了，但是理想很豐滿，現實很骨感，如果我們直接在子元件更改傳進來的 `props` ，不出意外瀏覽器會給你一坨大紅色的報錯，因為在 vue 中我們的資料流動是自上而下的，而子元件直接更改父元件傳來的 `props` 則是自下而上的資料流動，這是 vue 不允許的。 所以通常我們的解決辦法是，父元件通過 props 傳入狀態給子元件，子元件通過 props 來初始化另外一個內部的狀態，子元件每次更改狀態之後都通知父元件，然後由父元件來更改自己的狀態，其實就是 props on emit 的應用，接下來我們來上程式碼。 **父元件 Father.vue** ```vue ``` **子元件 Son.vue** ```vue ``` 可以看到我們上述的寫法，其實是維護了父子元件中的不同的兩個狀態，我們做的工作只是將這兩個狀態同步了，這種寫法沒有任何問題，其實對於子元件的部分我們也可以通過 computed 來實現，下面我們來看一看另一種子元件內維護同步狀態的方法： **子元件 Son.vue 的另一種寫法** ```vue ``` 好了，兩種寫法我們都已經演示完畢，現在我們來優化一下父元件中的寫法。 父元件中可以看到我們之前在上面綁定了一個 `update:food` 事件，並且使用箭頭函式做了一個賦值，其實這裡我們可以稍微優化一下，不要箭頭函式直接賦值，因為我們觸發的是自定義事件，而我們觸發的時候給的第一個引數就是新值，我們可以直接通過 `$event` 拿到這個值，所以可以寫成如下形式： **優化後的父元件** ```vue ``` 到這裡你以為就結束了？其實我們還可以更近一步，只要滿足我們以上的事件命名方式，我們實際上可以使用 `sync` 修飾符代替事件的繫結，也就是我們不用寫事件綁定了，但是子元件內部的事件觸發依然不能少，最終優化的結果如下： ```vue ``` 到此我們就真的完成了父子元件的同步，當然在子元件中維護一個狀態不一定是必須的，如果我們只用父元件傳給我們的 `props` 做展示，而子元件沒有對這個 `props` 直接更改的行為，那麼我們就不用在子元件建立另外一個狀態，我們子元件想改他的時候只需要在合適的時機提交合適的事件即可，但是有一種情況我們不得不在子元件中建立另一個狀態，就是我們父元件傳入的狀態在子元件中用於 v-model 這種雙向資料繫結的功能時，由於 v-model 會自動更改值所以直接填入從父元件接受的 props 就不合適了。 > 有前端問題需要討論的可以加我的qun:237871108。也可以通過嗶哩嗶哩搜尋木瓜太香找