Vue 中的 .sync 修饰符

场景描述：爸爸给儿子钱，儿子要花钱怎么办？儿子打电话（触发事件）向爸爸要钱。
我们先写一个父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>

再写一个子Vue：

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

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

很显然，这是一个简单的“花钱”小程序，但是在上面的vue中的<Child :money="total" v-on:update:money="total = $event"/>这句话是什么意思呢？意思就是我们在这里监听update:money,如果我们不进行监听，那么它在被改变的时候父亲就不知道值被改变了，但是这样的写法过于繁琐，所以我们约定把这句话可以改写成：<Child :money.sync="total" />，他的意思就是获取到要改变的值，如果这个值更新了就会触发后面的事件。

• 最后注意Vue中有三个规则：

1. 组件不能修改props外部数据
2. this.$emit可以触发事件，并传参
3. $event可以获取$emit的参数