Vue 中 .sync 修饰符的作用

.sync是一个语法糖。是父组件监听子组件更新某个props的请求的缩写语法。

在有些情况下，我们可能需要对一个 props 进行“双向绑定”，子组件可以变更父组件 然后父组件可以监听那个事件并根据需要更新一个本地的数据 property

例如：爸爸给儿子钱，儿子要花钱怎么办？ 于是儿子会打电话（触发事件）向爸爸要钱

//父组件 
<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money.sync="total"/>  //是<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>

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

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

子组件获取到props的数据 通过Button点击触发了一个update:money事件，将修改后的数据作为参数传递，父组件监听update:money事件，用$event获取$emit的参数值，更新数据