Vue 中的 .sync 修饰符

原理
.sync修饰符本质上是语法糖，将代码进行了简化。核心原理是对子组件，对父组件的pros进行监听并且更新。先把父组件的props传入子组件，如果子组件触发事件，对父组件的props进行修改,.sync就会监听该事件并且更新父组件的props
Vue规则

组件不能修改外部数据props，只能触发事件，通知父组件的props进行修改
this. $emit可以触发事件，并且传递参数$ event可以获取$emit的参数

场景
爸爸有1w块钱，儿子打电话请求爸爸传钱(触发事件)，然后进行花费
代码实例

// 儿子组件，从爸爸组件那里请求钱，然后消费
<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"/>
    // 等价于<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>