vue2.3.0+使用.sync修飾符對prop進行雙向綁定

背景、概念：

在一些情況下，我們可能會需要對一個 prop 進行“雙向綁定”。事實上，這正是 Vue 1.x 中的.sync 修飾符所提供的功能。當一個子組件改變了一個帶 .sync 的 prop 的值時，這個變化也會同步到父組件中所綁定的值。這很方便，但也會導致問題，因為它破壞了單向數據流。由于子組件改變 prop 的代碼和普通的狀態改動代碼毫無區別，當光看子組件的代碼時，你完全不知道它何時悄悄地改變了父組件的狀態。這在 debug 復雜結構的應用時會帶來很高的維護成本。

上面所說的正是我們在 2.0 中移除 .sync 的理由。但是在 2.0 發布之后的實際應用中，我們發現.sync 還是有其適用之處，比如在開發可復用的組件庫時。

我們需要做的只是讓子組件改變父組件狀態的代碼更容易被區分。從 2.3.0 起我們重新引入了.sync 修飾符，但是這次它只是作為一個編譯時的語法糖存在。

demo介紹：本demo的功用組件head.vue中，需要知道當前菜單是哪個，進而顯示高亮，demo結合elementui

父組件，只需要留意紅框部分

子組件header.vue，只需要留意紅框部分：

其中el-menu為element-ui的菜單，點擊菜單選項時會調用handleSelect函數，本人在handleSelect觸發時改變prop中的active，

當子組件需要更新 active的值時，它需要顯式地觸發一個更新事件update:active

總結

以上是生活随笔為你收集整理的Vue2.3.0+使用.sync修饰符对prop进行双向绑定/子组件同步prop到父组件绑定的值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。