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

在vue 1.x 中的 .sync 修飾符所提供的功能。當(dāng)一個(gè)子組件改變了一個(gè)帶 .sync 的prop的值時(shí)，這個(gè)變化也會(huì)同步到父組件中所綁定的值。

這很方便，但也會(huì)導(dǎo)致問(wèn)題，因?yàn)樗茐牧藛蜗驍?shù)據(jù)流。（數(shù)據(jù)自上而下流，事件自下而上走）

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

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

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

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

于是從 vue 2.3.0 開(kāi)始，我們重新引入了 .sync 修飾符，但是這次它只是作為一個(gè)編譯時(shí)的語(yǔ)法糖存在。他會(huì)被自動(dòng)擴(kuò)展為一個(gè)  自動(dòng)更新父組件屬性的 v-on 監(jiān)聽(tīng)器。

例如

<child :foo.sync=”msg”></child> 就會(huì)被擴(kuò)展為： <child :foo=”bar” @update:foo=”val => bar = val”>  （@是v-on的簡(jiǎn)寫(xiě)）

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

初始狀態(tài)：

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

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

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

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

這個(gè)例子會(huì)為 message 和 uC 同時(shí)添加用于更新的 v-on 監(jiān)聽(tīng)器。

總結(jié)

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

最新評(píng)論