在vue中很多時(shí)候需要prop是一個(gè)雙向綁定的值衡怀，但是vue推薦單向數(shù)據(jù)流晶衷，不提倡變更prop嗽元，也不推薦子組件更新父組件的值，因?yàn)樽咏M件和父組件都沒有明顯的變更來源掠兄，不小心還會(huì)導(dǎo)致死循環(huán)像云，導(dǎo)致尋找問題比較困難。
如果非要改變父組件的值蚂夕，vue推薦使用 update:myPropName的模式觸發(fā)事件
官網(wǎng)例子 比如目前有一個(gè)text-document要雙向綁定一個(gè)title組件
需要這么寫
?<textDocument?:title="title"?@update:title="title=$event"></textDocument>
接著text-document組件中需要如下定義
這樣提供明顯的更新來源?
.sync 是這種模式的語法糖 例如上述的例子
父組件可以直接寫
?<textDocument?:title.sync="title"></textDocument>
子組件不用變依然是
??<div>
????{{?title?}}
????<button?@click="$emit('update:title',newTitle)">更新title</button>
??</div>
所以.sync只是可以讓你省略@update:propName="propName = $event" 的語法糖
可以批量設(shè)置.sync 綁定一個(gè)對(duì)象
?<textDocument? v-bind.sync="obj"></textDocument>
這樣會(huì)為obj的每個(gè)對(duì)象設(shè)置@update:propName="propName = $event"事件
官網(wǎng)地址 vue官網(wǎng)sync
