如何理解Vue中的.Sync修饰符

    <div id="app">
        <template>
            {{bar}}
            <Btn :foo.sync="bar"></Btn>
        </template>
    </div>
    
<script>
    Vue.component('Btn', {
        template: `<button @click="increament">点我加一</button>`,
        props:['foo'],
        data:{
       		 copyFoo:this.foo
        },
        methods: {
            increament(){
                this.$emit('update:foo',++this.copyFoo)
            }
        }
    })
    new Vue({
        el:'#app',
		data:{
        	bar:0
        }
    })
</script>

//代码<Btn :foo.sync="bar"></Btn>
//会被拓展成<Btn :foo="bar" @update:foo="bar=$event"></Btn>
//$event就是子组件传来的数据

所以，假设父组件传给子组件的数据变量名为foo，

在使用.sync作为事件订阅语法糖时有两个前提条件

• 子组件发布的事件名称必须是update:foo
• 传回的数据就是foo对应数据的新值