.sync是一个语法糖。

    1. <comp :foo.sync="bar"></comp>

    等价于

    1. <comp :foo="bar" @update:foo="val => bar = val"></comp>

    当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件

    1. this.$emit('update:foo', newValue)

    vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
    案例：

    1. <div id="app">
    2.     <div>{{bar}}</div>
    3.     <my-comp :foo.sync="bar"></my-comp>
    4.     <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
    5. </div>
    6. <script>
    7.     Vue.component('my-comp', {
    8.         template: '<div @click="increment">点我+1</div>',
    9.         data: function() {
    10.             return {copyFoo: this.foo}
    11.         },
    12.         props: ['foo'],
    13.         methods: {
    14.             increment: function() {
    15.                 this.$emit('update:foo', ++this.copyFoo);
    16.             }
    17.         }
    18.     });
    19.     new Vue({
    20.         el: '#app',
    21.         data: {bar: 0}
    22.     });