在專案中使用vue+.sync修飾符

這次帶給大家在專案中使用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 修飾符也可以和v-bind 一起使用。

例如：     
  (不能寫成  :.sync="{ *********}"，否則會報錯的)

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

#########相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########Node.Js產生比特幣地址（附程式碼）###############vue.js element-ui做出選單樹形結構##########

以上是在專案中使用vue+.sync修飾符的詳細內容。更多資訊請關注PHP中文網其他相關文章！