如何理解Vue的.sync修饰符

.sync的功能

.sync修饰符，作为一个编译时的语法糖存在，会被扩展为一个自动更新父组件属性的v-on监听器.

示例代码：

<Child :money.sync="total"/>

扩展为代码：

<Child :money="total" v-on:update:money="total = $event"/>

当子组件需要更新money，的值时，它需要出发一个更新事件，我们来举个例子具体说明一下

场景描述：

爸爸给儿子钱，儿子要花钱，怎么解决？ 答：儿子打电话（触发事件）向爸爸要钱

示例代码（App.vue)：

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

示例代码（Child.vue)：

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

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

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

效果图：

总结

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步更新到父组件中。如果我们不用.sync，我们想做上面的那个功能，也可以用props传初始值，然后进行事件监听，实但是没有语法糖.sync 清晰。