浅析Vue中.sync修饰符

.sync修饰符作为编译时的语法糖存在，它会被扩展为一个自动更新父组件属性的v-on监听器。
<comp:foo.sync="bar"></comp>
会被扩展为：
<comp:foo="bar" v-on:update:foo="val=>bar=val">
当组件需要更新foo的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo',newValue)
以下通过一个实例（弹窗的关闭事件）来说明这个代码到底是怎么用的：

<template>
    <div class="detail">
        <myComponent :show.sync="valueChild" style="padding:30px 20px 30px 5px;border:1px solid #ddd;margin-bottom:10px"></myComponent>
    </div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent',{
    template:`<div v-if="show">
                <p>默认初始值是{{show}},所以是显示的</p>
                <button @click.stop="closeDiv">关闭</button>
              </div>`，
    props：['show'],
    methods:{
        closeDiv(){
            this.$emit('update:show',false);//触发input事件，并传入新值
        }
    }
})
export default{
    data(){
        return{
            valueChild:true,
        }
    },
    methods:{
        changeValue(){
            this.valueChild = !this.valueChild
        }
    }
}
</script>

Vue修饰符sync的功能是：当一个子组件改变了一个prop的值时，这个变化也会同步传到父组件中所绑定。如果我们不用.sync，我们想做上面实例弹窗功能，我们也可以props传初始值，然后事件监听。