Vue：.sync 修饰符：对 props 进行“双向绑定”

标签： Vue

问题：

在 Vue 文档中可以知道，子组件想要改变父组件的数据，必须在子组件使用 this.$emit('事件名', data) 来向父组件传递数据，父组件在组件标签上使用 @时件名.native='onSubmit' 来触发事件，获取子组件传递过来的值。

但是，在 element-ui 使用过程中，发现 el-dialog 组件，不用在组件标签上创建自定义事件，就可以改变父组件值。

简而言之: 子组件可以直接改变父组件传递过来的 prop 值。

父组件:
绑定一个 title 属性，并添加 .sync 修饰符

<text-document v-bind:title.sync="doc.title"></text-document>

子组件:
触发 emit 方法，必须加上 update: 关键词，可以将 $emit 传递给父组件的值，替换成对应的绑定值。
本例中，子组件的 newTitle 赋值给父组件的 title

this.$emit('update:title', newTitle)

注意事项：

.sync 修饰符不允许传入表达式，比如：
<text-document v-bind:title.sync="doc.title + 'hello'"></text-document>