如何理解vue的sync修饰符

vue 修饰符sync的功能是：当一个子组件需要改变外部组件的值时,使得父组件更新该数据。

//子组件
<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>

//父组件
<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>

当子组件需要更新 money 的值时，它需要显式地触发一个更新事件：

this.$emit('update:money', newValue)

代码示例中 <Child :money.sync="total"/> 会被扩展为:

<Child :money="total" v-on:update:money="total=$event"/>在这里父组件接收newValue更新数据