今天学习了 Vue 的模板、指令和修饰符，对于 .sync 这个修饰符不是能特别好地理解，所以写一篇博客来整理下思路。

场景描述

想象一下这样一个场景，爸爸给儿子设定一个月10000的零花钱，儿子每次要用零花钱的时候跟爸爸要，然后花钱并且扣除相应的额度。

相应的代码

main.js：

new Vue({
  render: h => h(App)
}).$mount("#app")

然后我们写一个Child组件的vue文件：

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["momey"]
}
</script>

<style>
.child {
  border: 3px solid green;
}
</style>

然后我们在App.vue文件里用这个组件：

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money="total = $event" />
  </div>
</template>

<script>
import Child from "./Child.vue"
export default {
    data() {
      return {total: 10000}
    },
    components: {Child: Child}
}
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

界面大概是这样的：

image.png

点击花钱，就可以让两边的10000都同时改变。

.sync

因为这种情况用到的很多，所以Vue用.sync修饰符来给这个模式提供了一个缩写。
我们把<Child :money="total" v-on:update:money="total = $event" />这行简化一下变成<Child :money.sync="total" />就可以了，与上面一行完全等价。

这就是 Vue 的 .sync 修饰符的作用。