vue .sync不生效的坑

vue 2.3.0+ 新增了 .sync 修飾符，數據的雙向綁定時，子組件通過this.$emit('自定義事件名（隨意）', 要傳給父組件的參數)

//子組件
this.$emit('modifyTitle', newTitle)

 

 

然后父組件中使用子組件可以監聽那個事件並根據需要更新一個本地的數據 property。例如：

//父組件
<Child v-bind:title="doc.title" @modifyTitle="doc.title = $event" />

 

父組件中為了方便，可以使用.sync 修飾符來簡寫：

//子組件中的傳值
//注意：第一個參數自定義事件名格式必須是: update:要更新的data【如果是更新對象的某個屬性，那么只要寫這個屬性名（key）就好】
this.$emit('update:title', newTitle)

//父組件使用.sync字符
 <child :title.sync="doc.title" />

 

注意：帶有 .sync 修飾符的 v-bind 不能和表達式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無效的)。取而代之的是，你只能提供你想要綁定的 property 名，類似 v-model