.sync是父子组件之间传递信息时可用的一个语法糖。
    我们来举个例子,
    App.vue

    1. <template>
    2.     <div class="app">
    3.         App.vue 我现在有{{total}}
    4.         <Child :money="total" v-on:我要花钱="total = $event" />
    5.     </div>
    6. </template>
    8. <script>
    9.     import Child from "./Child.vue"
    10.     export default{
    11.         data(){
    12.             return {total:10000}
    13.         },
    14.         components:{
    15.             Child:Child
    16.         }
    17.     }
    18. </script>

    Child.vue

    1. <template>
    2.     <div class="child">
    3.         {{money}}
    4.         <button @click="$emit('我要花钱',money - 100)">
    5.             <span>花钱</span>
    6.         </button>
    7.     </div>
    8. </template>
    10. <script>
    11.     export default{
    12.         props:{"money"}
    13.     }
    14. </script>

    解释一下过程：App.vue中有个:money=”total”，将这个money给了Child.vue，Child.vue能看到这个money，Child.vue想花钱，就会触发一个事件”我要花钱”，将money-100传给监听Child.vue的父组件App.vue，App.vue发现Child.vue有这个”我要花钱”事件,便通过$event拿到传过来的money-100的结果，然后渲染更新。

    现在我们用.sync来简写App.vue里的那句：

    1. <Child :money="total" v-on:我要花钱="total = $event" />

    简写为：

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

    完！