vue中的.sync修飾符用法及原理詳解

vue中我們經常會用v-bind(縮寫為:)給子組件傳入參數。
或者我們會給子組件傳入一個函數，子組件通過調用傳入的函數來改變父組件的狀態。
例如：

//父組件給子組件傳入一個函數
<MyFooter :age="age" @setAge="(res)=> age = res">
</MyFooter>
//子組件通過調用這個函數來實現修改父組件的狀態。
mounted () {
console.log(this.$emit('setAge',1234567));
}

這時子組件觸發了父組件的修改函數使父組件的age修改成了1234567

這種情況比較常見切寫法比較復雜。於是我們引出今天的主角 .sync

這時我們可以直接這樣寫

//父組件將age傳給子組件並使用.sync修飾符。
<MyFooter :age.sync="age">
</MyFooter>
//子組件觸發事件
mounted () {
console.log(this.$emit('update:age',1234567));
}

這里注意我們的事件名稱被換成了update:age
update：是被固定的也就是vue為我們約定好的名稱部分
age是我們要修改的狀態的名稱，是我們手動配置的，與傳入的狀態名字對應起來

這樣就完成了，是不是感覺簡單了很多。

注意事項：
這里我們必須在事件執行名稱前加上update：的前綴才能正確觸發事件。
————————————————
原文鏈接：https://blog.csdn.net/liushijun_/article/details/92426854