.sync 作用

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

.sync 理解

一般情况下，想要实现父子组件间值的传递，通常使用的是 props 和自定义事件 emit
其中，父组件通过 props 将值传给子组件，子组件再通过 emit 将值传给父组件，父组件通过事件监听 $event 获取子组件传过来的值
如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖

示例

子组件通过$emit修改 money 后，将值同步到父组件

<Child :money="total" @update:money="total = $event"></Child> 等价于 <Child :money.sync="total" />,这种写法就是语法糖

<div id="app">
    <div>{{bar}}</div>
    <Child :money.sync="total" />
    <!-- <Child :money="total" @update:money="total = $event" || @update:money="val => total = val"></Child> -->
</div>
<script>
    Vue.component('Child', {
        template: '<div @click="increment">点我+1</div>',
        // 或
        // template: '<div @click="$emit('update:money', money - 100)">点我+1</div>',
        props: ['money'],
        methods: {
            increment: function() {
                this.$emit('update:money', money - 100);
            }
        }
    });
    new Vue({
        el: '#app',
        data: {total: 10000}
    });
</script>