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----------------------------