Vue 2.3.0 引入了新的 sync 修飾符,該修飾符可以簡化父子組件之間雙向數據綁定的代碼。
我們可以在子組件的 props 中使用 sync,這樣子組件就可以通過 $emit 發送事件,父組件可以響應該事件并更新數據,這種方式省去了在子組件中手動 $emit 和在父組件中監聽事件的步驟,使得代碼更為簡潔。
// 父組件 <template> <div> <child :prop1.sync="data1"></child> </div> </template> <script> export default { data() { return { data1: '' } }, components: { child } } </script> // 子組件 <template> <div> <input :value="prop1" @input="$emit('update:prop1', $event.target.value)"> </div> </template> <script> export default { props: { prop1: { type: String, default: '' } } } </script>
在上面的代碼中,我們在父組件中使用了 sync 修飾符將 data1 傳遞到了子組件的 prop1 中,在子組件中我們可以使用 :value="prop1" 將 prop1 綁定到 input 的 value 屬性上,同時我們在 @input 事件中使用 $emit('update:prop1', $event.target.value) 發送 update:prop1 事件,并將 input 的值作為參數傳遞,這樣就可以在父組件中響應該事件并更新 data1 了。
總的來說 sync 修飾符是一個非常方便的特性,可以更加便捷地實現父子組件之間的雙向數據綁定。