溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了.sync 修飾符如何在vue中使用，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
在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 監聽器。
上述內容就是.sync 修飾符如何在vue中使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
