在有些情況下，我們可能需要對一個 prop 進行“雙向綁定”。不幸的是，真正的雙向綁定會帶來維護上的問題，因爲子組件可以修改父組件，且在父組件和子組件都沒有明顯的改動來源
vue中我們經常會用v-bind(縮寫爲:)給子組件傳入參數。
或者我們會給子組件傳入一個函數，子組件通過調用傳入的函數來改變父組件的狀態
例如：
//父組件給子組件傳入一個函數
<Footers :name="name" @setName="(res)=> name = res">
</Footers>
//子組件通過調用這個函數來實現修改父組件的狀態。
mounted () {
console.log(this.$emit('setName',1234567));
}
現在子組件觸發了父組件的修改函數使父組件的name修改成了1234567
這種情況比較常見切寫法比較複雜。我們可以使用 vue 2.3.0+ 新增 的
.sync 修飾符
例子：
//父組件將name傳給子組件並使用.sync修飾符。
<Footers :name.sync="name">
</Footers>
//子組件觸發事件
mounted () {
console.log(this.$emit('update:name',1234567));
}
這裏事件名稱被換成了update:name
update：是被固定的也就是vue爲我們約定好的名稱部分
name是我們要修改的狀態的名稱，是我們手動配置的，與傳入的狀態名字對應起來
這樣就完成了。
注意事項：
這裏我們必須在事件執行名稱前加上update：的前綴才能正確觸發事件。
帶有 .sync 修飾符的 v-bind 不能和表達式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無效的)。取而代之的是，你只能提供你想要綁定的屬性名，類似 v-model。
將 v-bind.sync 用在一個字面量的對象上，例如 v-bind.sync=”{ title: doc.title }”，是無法正常工作的，因爲在解析一個像這樣的複雜表達式的時候，有很多邊緣情況需要考慮。