vue提供了.sync修饰符，说白了就是一种简写的方式，我们可以将其当作是一种语法糖，比如v-on: click可以简写为@click。sync修饰符，与我们平常使用$emit实现父子组件通信没有区别，只不过是写法上方便一些。

背景：

日常开发时，我们总会遇到需要父子组件双向绑定的问题，但是考虑到组件的可维护性，vue中是不允许子组件改变父组件传的props值的。那么同时，vue中也提供了一种解决方案.sync修饰符。在此之前，希望你已经知道了vue中是如何通过事件的方式实现子组件修改父组件的data的。

.sync修饰符：

首先我们知道，父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信，通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。比如向下边这这样：

子组件使用$emit向父组件发送事件：

 
  1. this.$emit('update:title', newTitle)

父组件监听这个事件并更新一个本地的数据title：

 
  1. <text-document
  2. :title="title"
  3. @update:title="val => title = val"
  4. ></text-document>

为了方便这种写法，vue提供了.sync修饰符，说白了就是一种简写的方式，我们可以将其当作是一种语法糖，比如v-on: click可以简写为@click。而上边父组件的这种写法，换成sync的方式就像下边这样：

 
  1. <text-document
  2. :title.sync="title"
  3. ></text-document>

有没有发现很清晰，而子组件中我们的写法不变，其实这两种写法是等价的，只是一个语法糖而已，如果到这里你还不太明白。下边是个完整的demo，可以copy自己的项目中尝试一下。相信你会恍然大悟。

父组件：

 
  1. <template>
  2. <div>
  3. <child :name.sync="name"></child>
  4. <button @click="al">点击</button>
  5. <button @click="change">改变</button>
  6. </div>
  7. </template>
  8.  
  9. <script>
  10. import child from './child'
  11. export default {
  12. name: 'list',
  13. components: {
  14. child
  15. },
  16. data () {
  17. return {
  18. listItems: ['buy food', 'play games', 'sleep'],
  19. name: 'xiaoming'
  20. }
  21. },
  22. methods: {
  23. al() {
  24. alert(this.name);
  25. },
  26. change() {
  27. this.name = '123';
  28. }
  29. }
  30. }
  31. </script>

子组件：

 
  1. <template>
  2. <div>
  3. <input :value="name" @input="abc" type="text">
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. name: {
  10. type: String,
  11. required: true
  12. }
  13. },
  14. methods: {
  15. abc(e) {
  16. console.log(e.target.value);
  17. this.$emit('update:name', e.target.value);
  18. }
  19. }
  20. }
  21. </script>

ok，当你运行起来时，就会发现这样便实现了父子组件的双向绑定。

总结：

sync修饰符，与我们平常使用$emit实现父子组件通信没有区别，只不过是写法上方便一些。当然，利用引用类型的特性实现双向绑定我认为也并非完全不可取。