Vue 中我们经常会用 v-bind ( 缩写为 ':' ) 给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。例如：

// 父组件给子组件传入一个函数
<Person :age="age" @setAge="(res)=> age = res"></Person>
// 子组件通过调用 setAge 函数来实现修改父组件( age )的状态

// 这里我们举例，在子组件挂载成功时去触发父组件的修改函数( setAge )，使父组件的 age 修改成了 18
mounted () {
    console.log(this.$emit('setAge', 18));
}

这种情况比较常见但是写法比较复杂。于是我们引出今天的主角 .sync

这时我们可以直接这样写：

// 父组件将 age 传给子组件并使用 .sync 修饰符
<Person :age.sync="age"></Person>
// 子组件触发事件
mounted () {
    console.log(this.$emit('update:age', 18));
}

这里注意我们的事件名称被换成了 'update:age'。
'update：' 是被固定的,也就是 Vue 为我们约定好的名称部分；
'age' 是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来。

这样就完成了，是不是感觉简单了很多。

注意事项：
这里我们必须在事件执行名称前加上 'update：' 的前缀才能正确触发事件。