vue的sync修饰符在ElementUI中的弹窗控件中，经常使用到，但是我很少在别的组件上看到过.sync的使用，有很长一段时间我都觉得这个是elementui自己封装的语法糖，最近比较空闲，返回去看VUE的官方文档才发现，原来.sync是vue的修饰符。因此好好了解了一下，并写下这篇笔记。 vue是双向绑定的单向数据流，数据的双向绑定是有MVVM框架实现的，View、ViewModel、Model组成的，他们要通过中间件ViewModel来进行，当Model部分数据发生改变时，由于vue中Data Binding数据和Dom层进行了绑定，ViewModel通知View层更新视图，当在视图View数据发生变化，也会通过viewModel同步在Model中，View和Model直接的同步完全是自动的，不需要人手动的操作Dom。而单向数据流是指只能从一个方向修改数据，在Vue中，父组件通过props传数据给子组件，子组件不能修改父组件传的值。 但是在某些情况下，我们可能需要对一个prop进行双向绑定，（真正的双向绑定会带来维护的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源），所以在vue中采用update：myPropName的模式触发事件代替真正的双向绑定。 父组件
<text-document v-bind:title='doc.title' v-on:update:title='doc.title=$event'></text-document>
在子组件中则需要通过emit触发
this.$emit('update:title',newTitle)
为了方便起见，vue为这种模式提供了一个缩写，即就是.sync修饰符
<text-document v-bind:title.sync='doc.title'></text-document>
可以用一个对象同时设置多个prop
<text-document v-bind.sync='doc'></text-document>
带有.sync修饰符的v-bind不能和表达式一起使用。只能绑定属性名。
前端中常常用到的各种控件都会用到v-model这个属性，我们都知道，这个属性绑定的变量，控件的值变化，我们的变量也会变化----嗯，好像有点不对，vue不是单向数据流吗 这就要说到v-model这个神奇的事件了，vue的教程中写到，一个组件上的v-model默认为利用名为value的prop和名为input的事件，来实现父子组件的通信，
Vue.compoennt('base-checkbox',{
model: {
prop: 'checked',
event: 'change'
}
props: {
checked: Bollean
},
template:
`<input
type='checkbox'
v-bind:checked='checked'
v-on:change='$emit("change",$event.tartget.checked)'
/>`
}
使用这个组件时
<base-checkbox v-model='lovingVue'></base-checkbox>
其实总的来说，vue的.sync修饰符和自定义组件用的v-model都是语法糖，在使用者看来他的数据是双向绑定，相互影响的，这两个使用于公共组件的编写，会让使用者使用起来更方便、快捷。而通过elementUI中的.sync和v-model的使用，我们可以发现，一般v-model绑定的是组件的值，input、select都是用户选择的值，也是用户需要的值，而sync是这个组件中需要用到的值，像el-dialog中的:visible.sync就是弹窗需要用到的值，（表述的不太清楚，等哪天更清晰了，再来修改）
