在一些情況下，我們可能會需要對一個 prop （父子組件傳遞數(shù)據(jù)的屬性） 進行“雙向綁定”。

在vue 1.x 中的 .sync 修飾符所提供的功能。當一個子組件改變了一個帶 .sync 的prop的值時，這個變化也會同步到父組件中所綁定的值。

這很方便，但也會導(dǎo)致問題，因為它破壞了單向數(shù)據(jù)流。（數(shù)據(jù)自上而下流，事件自下而上走）

由于子組件改變 prop 的代碼和普通的狀體改動代碼毫無區(qū)別，所以當你光看子組件的代碼時，你完全不知道它合適悄悄地改變了父組件的狀態(tài)。

這在 debug 復(fù)雜結(jié)構(gòu)的應(yīng)用時會帶來很高的維護成本。于是我們在 vue 2.0 中移除了 .sync 。

但是在實際應(yīng)用中，我們發(fā)現(xiàn) .sync 還是有其適用之處的，比如在開發(fā)可復(fù)用的組件庫時。（懵逼○△○）

我們需要做的只是  讓子組件改變父組件狀態(tài)的代碼更容易被區(qū)分。

于是從 vue 2.3.0 開始，我們重新引入了 .sync 修飾符，但是這次它只是作為一個編譯時的語法糖存在。他會被自動擴展為一個  自動更新父組件屬性的 v-on 監(jiān)聽器。

例如

<child :foo.sync=”msg”></child> 就會被擴展為： <child :foo=”bar” @update:foo=”val => bar = val”>  （@是v-on的簡寫）

 當子組件需要更新 foo 的值的時候，他需要顯示的觸發(fā)一個更新事件：   this.$emit( “update:foo”, newValue );

初始狀態(tài)：

 點擊之后的狀態(tài)：

原理就是父組件向子組件傳遞了一個函數(shù)：function (newValue) { this.msg = newValue; }

當使用一個對象一次性設(shè)置多個屬性的時候，這個 .sync 修飾符也可以和 v-bind 一起使用。

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

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

總結(jié)

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

最新評論