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 修飾符也可以和 v-bind 一起使用。

 

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

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

 

 

我不知道這是什么原因,可能是我弄錯了,希望成功的兄弟可以告訴我一下,非常感謝 ^_^


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM