根据VUE官方文档所述，.sync修饰符用来prop双向绑定，而.sync修饰符类似v-model，只是一个语法糖
先看下放代码，看一下用法，实现了prop的双向绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-sync</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<my-input :show.sync='checked'></my-input>
<div>{{checked}}</div>
</div>
</body>
<script>
Vue.component('my-input', {
props: ['show'],
template: `<div><button @click='add'>加1</button></div>`,
data() {
return {
value: this.show
}
},
methods: {
add() {
this.$emit('update:show', ++this.value);
}
}
})
var vm = new Vue({
el: '#app',
data: {
checked: 0
},
watch: {
checked(newVal, oldVal) {
console.log(this.checked)
}
}
})
</script>
</html>
为什么要这么写，是因为父组件传值给子组件，子组件不能改变父组件传递过来的值，这也是上述代码中要在子组件定义一个value，用来承接父组件传递过来的值的原因。而不用.sync修饰符的话要改变父组件的值，那么就要在父组件使用方法改变，如下方代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-sync</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<my-input :show='checked' @update-value='changeChecked'></my-input>
<div>{{checked}}</div>
</div>
</body>
<script>
Vue.component('my-input', {
props: ['show'],
template: `<div><button @click='add'>加1</button></div>`,
data() {
return {
value: this.show
}
},
methods: {
add() {
this.$emit('update-value', ++this.value)
}
}
})
var vm = new Vue({
el: '#app',
data: {
checked: 0
},
methods: {
changeChecked(val) {
this.checked = val
}
},
watch: {
checked(newVal, oldVal) {
console.log(this.checked)
}
}
})
</script>
</html>
两者相比较就可以看出差别，所以开头说.sync只是一个类似v-model的语法糖。
注意事项：
1）.注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。 这是官方文档所述，就是说sync后面不能跟表达式
2）.sync还有一个用法,也算简写
<text-document v-bind.sync="doc"></text-document>
// doc是一个对象，例如 doc:{name:'sads',age:21} 等价于下方
<text-document v-bind:name.sync="doc.name" v-bind:age.sync="doc.age"></text-document>
