這次帶給大家在專案中使用vue .sync修飾符，在專案中使用vue .sync修飾符的注意事項有哪些，以下就是實戰案例，一起來看一下。
在某些情況下，我們可能需要對一個 prop （父子元件傳遞資料的屬性） 進行「雙向綁定」。
在vue 1.x 中的 .sync 修飾符所提供的功能。當一個子元件改變了一個帶有 .sync 的prop的值時，這個變化也會同步到父元件中所綁定的值。
這很方便，但也會導致問題，因為它破壞了單向資料流。 （資料自上而下流，事件自下而上走）
由於子元件改變prop 的程式碼和普通的狀體改動程式碼毫無區別，所以當你光看子元件的程式碼時，你完全不知道它合適悄悄地改變了父組件的狀態。
這在 debug 複雜結構的應用時會帶來很高的維護成本。於是我們在 vue 2.0 中移除了 .sync 。
但是在實際應用中，我們發現 .sync 還是有其適用之處的，例如在開發可重複使用的元件庫時。 （懵逼○△○）
我們需要做的只是 讓子元件改變父元件狀態的程式碼更容易被區分。
於是從 vue 2.3.0 開始，我們重新引入了 .sync 修飾符，但這次它只是作為一個編譯時的語法糖存在。他會被自動擴充為一個 自動更新父元件屬性的 v-on 監聽器。
例如
<child :foo.sync=”msg”></child> 就会被扩展为： <child :foo=”bar” @update:foo=”val => bar = val”> （@是v-on的简写）
當子元件需要更新foo 的值的時候，他需要顯示的觸發一個更新事件： this.$emit( “update:foo”, newValue );
初始狀態：
點擊後的狀態：
原則就是父元件傳遞了一個函數給子元件：
function (newValue) { this.msg = newValue; }
例如：
(不能寫成 :.sync="{ *********}"，否則會報錯的)
這個例子會為message 和uC 同時加入用於更新的v-on 監聽器。
以上是在專案中使用vue+.sync修飾符的詳細內容。更多資訊請關注PHP中文網其他相關文章！
