我們使用 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>