.sync 作用
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
.sync 原理
利用EventBus，子组件触发事件，父组件响应事件并实现数据的更新，避免由子组件直接修改父组件传过来的内容。（如果子组件直接操作，vue会有警告提示）。
示例
一个Vue应用中有一个父组件包含了一个子组件，子组件接收了父组件传入的一个外部变量（props），子组件通过$emit让父组件监听到子组件的一个事件，该事件修改了外部变量props，然后将修改后的结果同步给父组件中被.sync修饰的属性。
<template>
<div class="details">
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div></template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
template: `<div v-if="show"> <button @click.stop="closeDiv">关闭</button> </div>`,
props:['show'],
methods: { closeDiv() {
this.$emit('update:show', false)
}
}
})
export default{
data(){ return{ valueChild:true} },
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
以上示例的实现流程如下：
组件myComponent接收了外部变量show，也就是父组件的:show传入的data中的valueChild的值；
组件myComponent通过$emit使父组件能够监听到update:show事件；
父组件通过 v-on:update:show="valueChild = $event" 监听到update:show事件的返回值$event，并将$event值同步到valueChild；
v-on:update:show="valueChild = $event" 则被简写为 :show.sync
