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