在一些情況下，我們可能會需要對一個 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 修飾符也可以和 v-bind 一起使用。

例如：  <child  v-bind.sync = “{ message: msg, uC: uc}”></child>     (不能寫成  :.sync="{*********}"，否則會報錯的)

這個例子會為 message 和 uC 同時添加用于更新的 v-on 監聽器。

總結

以上所述是小編給大家介紹的vue 之 .sync 修飾符示例詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！