vue中的.sync修饰符

博主在上一篇软文中（ http://t.csdn.cn/dwUOS ）介绍了 .native 修饰符，是不是很好用？

今天我们再来学习一下 .sync 修饰符，一句话解释：

.sync 修饰符是 @update:自定义属性名 的语法糖

示例代码如下：

<comp :foo.sync="bar" />

会被扩展为：

<comp :foo="bar" @update:foo="bar = $event" />

当子组件需要更新 foo 的值时，它需要显式的触发一个更新事件：

this.$emit('update:foo', newValue)

接下来360度无死角的解释一下：

Vue中的数据传递一般是单向数据流，即父组件数据通过 props 传递给子组件，子组件可以通过自定义事件间接修改父组件中的数据，示例代码：

# App.vue里父传子
<template><div><my-son :gender="gender" /></div>
</template><script>
import mySon from './components/my-son.vue'export default {components: { mySon },data() {return {gender: 0}}
}
</script>

# 子组件里子传父
# 想使用.sync语法糖的话, 自定义事件命名必须为 'update:属性名'
<template><div><h2>我是子组件</h2><h3>我从爸爸那里拿到了 {{ gender }} </h3><button @click="handleClick">儿子改变爸爸的值</button></div>
</template><script>export default {props: {gender: {type: Number,required: true}},methods: {handleClick() {this.$emit('update:gender', 1)}},}
</script>

接下来就是见证奇迹的时刻了：

# 不使用.sync语法糖的写法
<template><div><my-son :gender="gender" @update:gender="gender = $event" /></div>
</template>

# 使用.sync语法糖
<template><div><my-son :gender.sync="gender = $event" /></div>
</template>

搞定！

End----------------------------