.sync 修饰符是事件绑定的语法糖。

    应用场景是在父子组件传值的，且子组件要修改这个数据的时候使用。它的原理是利用EventBus，子组件触发事件，父组件响应事件并实现数据的更新，避免由子组件直接修改父组件传过来的内容。（如果子组件直接操作，vue会有警告提示）

    用一个现实中的例子来说：正常来说，钱都是在父亲身上的，儿子要用钱是告诉父亲要用钱，然后父亲从身上拿出钱给儿子使用。如果说子组件直接操作父父组件传过来的值，等同于儿子没经过通知父亲这一步就拿钱用了，这等于是偷钱，不合理的。

    其实父子组件传值的过程等同于是父亲告诉儿子，我有这么些个钱可以用，不是让子组件直接操作这个值。你要用多少，告诉我，然后把用完后会剩余多少告诉我就可以了。

    搞清楚了这个逻辑，那么来看一个例子：

    child.vue(子组件)

    1. <template>
    2.   <div class="child">
    3.     {{money}}
    4.     <!-- 我要用100 -->
    5.     <button @click="$emit('update:money', money-100)">
    6.       <span>花钱</span>
    7.     </button>
    8.   </div>
    9. </template>
    11. <script>
    12. export default {
    13.   props: ["money"]
    14. };
    15. </script>
    17. <style>
    18. .child {
    19.   border: 3px solid green;
    20. }
    21. </style>

    parent.vue(父组件)

    1. <template>
    2.   <div class="app">
    3.     App.vue 我现在有 {{total}}
    4.     <hr>
    5.     <!-- 语法糖式写法 -->
    6.     <!-- <Child :money.sync="total"/> -->
    7.     <Child :money="total" v-on:update:money="total = $event"/>
    8.   </div>
    9. </template>
    11. <script>
    12. import Child from "./Child.vue";
    13. export default {
    14.   data() {
    15.     return { total: 10000 };
    16.   },
    17.   components: { Child: Child }
    18. };
    19. </script>
    21. <style>
    22. .app {
    23.   border: 3px solid red;
    24.   padding: 10px;
    25. }
    26. </style>

    这个代码就是上述内容的解释，实现的原理是利用eventBus，在子组件使用$emit('update:money', money-100) 来通知父组件去响应，而父组件则通过$event 来接收经过子组件修改后的值。

    注意v-on:update:money这里事件必须写为update:mondy，update是vue规定的语法书写格式，money是被绑定事件的属性。正式这样的规定使

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

    这么长的语句得以缩写为：

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

    而子组件内也必须用'update:money'事件名去触发响应

    1. <button @click="$emit('update:money', money-100)">

    vue文档-.sync