.sync修饰符是基于某些Vue规则和现实中的编程需求诞生的。我们在编程中常常会遇到这种场景：父组件引入一个子组件，父组件通过props给子组件传入某个数据，子组件的需求是要修改父组件中传入的数据。然而Vue规则规定组件不能修改props外部数据，但是我们可以通过this.$emit向父组件传值，告诉父组件它的儿子组件自定义了某事件并且将给父组件传数据，当父组件监听到儿子组件的自定义事件发生后，父组件可以用$event来获取子组件用$emit传入的参数，根据传入的参数按儿子组件的要求对自身的props进行修改。
用简单的代码能够帮助理解，以下有父组件App.vue和子组件Child.vue：
//App.vue
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money="total" v-on:update:money="total = $event"/>
<!--子组件有$emit('update:money', money-100)，设置了自定义事件'update:money'，
当App.vue监听到Child组件中触发了updata:money事件后，利用$event从子组件中接收数据，
并且把这个数据赋值给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)">
<!--子组件通过$emit设置自定义事件，其中参数'update:money'表示自定义的事件名称，
参数'money-100'代表把父组件通过props属性传入的money值减100，
得到的数值作为$emit()的第二个参数传给父组件，父组件通过$event接收这个值，$event的值赋给了total，
所以父组件中的total值通过子组件的自定义事件实现了变化-->
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>
运行效果如下:
.sync修饰符的诞生：
本例App.vue中在模板template通过XML标签引入Child.vue子组件中有这么一句很长的代码:money="total" v-on:update:money="total = $event"，作用是给Child子组件传入自身的total属性，子组件通过money字段匹配接收，当监听到子组件触发了update:money事件时通过$event接收子组件给父组件传入的数据。Vue的设计者认为类似的代码非常常用，但是太长了写起来很不方便，索性将:money="total" v-on:update:money="total = $event这样的代码简化成了:money.sync="total"，用.sync修饰符自动完成上述功能，使代码更加简洁易用。
简化后的代码:
//App.vue
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money.sync="total"/>
<!--.sync修饰符的应用-->
</div>
</template>
