vue中 .sync 的作用

 

我們使用 vue 編寫彈框組件的時候，想要關閉彈窗時往往會寫個關閉的方法，子組件$emit，父組件里還要加 @xxx="xxxxx"， 非常的不優雅，現在使用 .sync 就非常方便優雅地控制彈窗顯示和隱藏了。

 

父組件：

<myModal :show.sync="modalShow" /> //編譯時會被擴展為 <myModal :show="modalShow" @update:show="val => modalShow = val" />

可以看出來，.sync 其實就是一個語法糖

子組件：

// 子組件可以通過$emit 觸發 update 方法改變 <div @click="$emit('update:show', false)">關閉</div>