sync修饰符的使用场景
在实际应用中，我们有时候需要对prop外部传进来的数据进行“双向绑定”，但不幸的是，真正的双向数据绑定会带来维护上的问题。因为子组件可以变更父组件，父组件没有明显的变更来源，这样父组件的操作会重新覆盖传给子组件的数据。
我们常规的做法是这样的：
---main.vue---
<template>
<child :money="total" v-on:update:money='total=$event'></child>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child }
};
</srcipt>
---child.vue---
<template>
<div class="child">
<button @click="$emit('update:money', money-100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
父组件将total的值付给money，然后子组件通过props接收了money的值。如果要对money进行操作，则需要通知父组件，使用$emit将一个使用钱的事件暴露出去，并告诉外部我需要使用多少钱。这里使用的是update:money作为事件名暴露出去。当父组件使用子组件时，知道子组件传过来一个需要操作prop属性值时，就监听这个暴露出来的事件，并使用一个变量来接收使用之后的prop值。
.sync的出现
.sync是一个语法糖，主要的作用就是帮我们简化了父组件监听子组件操作prop属性的行为。
将<Child :money="total" v-on:update:money="total = $event"/>简化为 <Child :money.sync="total">
变化之后，父组件的代码如下：
---main.vue变化前---
<template>
<child :money="total" v-on:update:money='total=$event'></child>
</template>
---main.vue变化后---
<template>
<Child :money.sync="total">
</template>
也就是说vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
