sync修饰符

使用目的：

实现父子组件双向绑定（其实质也是父子组件之间的属性事件传递）

父组件中：
<child :visible.sync="visible" v-show="visible"></child>
data(){
    return {
        visible:false
    }
}
子组件中：
<button @click="handleClick"></button>
methods:{
    handleClick(){
        this.$emit('updata:visible',true)
    }
}

sync只是一个语法糖：（如下的简写）

父组件中：
<child v-show="visible" :visible="visible" @update:visible="handleVisible"></child>
data(){
    return {
        visible:false
    }
},
methods:{
   handleVisible(val){
       this.visible = val
   } 
}
子组件中：
<button @click="handleClick"></button>
methods:{
    handleClick(){
        this.$emit('updata:visible',true)
    }
}

满足1、2两个条件就可以用.sync修饰符：

1、父组件给子组件传递一个visible属性

2、子组件约定好触发的事件就叫@update:visible