1. 程式人生 > 其它 >vue .sync不生效的坑

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