VUE中.sync 修饰符

vue 1.x 的时候曾作为双向绑定功能存在，即子组件可以修改父组件中的值。
vue2.0时因为它违反了单向数据流的设计理念，单向数据流指的是使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立，所以在 vue2.0 的时候被干掉了。
在 vue2.3.0+ 以上版本又重新引入了这个 .sync 修饰符。但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。说白了就是让我们手动进行更新父组件中的值了，从而使数据改动来源更加的明显。
作为语法糖，肯定有简单的写法：

//普通写法
text-document
    v-bind:title="doc.title"
    v-on:update:title="doc.title = $event"
></text-document>
//语法糖写法
<text-document   
	v-bind:title.sync="doc.title"  
></text-document>
  
Vue.component('text-document', { 
  props: ['title'], 
  template: `
    <div> 
      <button @click='setNewTitle'>更新标题</button>
    </div>
  `,
  methods:{
   setNewTitle:function(){
       //手动进行更新父组件中的值
       this.$emit('update:title', '这步操作修改标题实现prop双向绑定')
    } 
  }
})

var vm = new Vue({
  el:'#app',
  data:{
     doc:{
      title:'对prop进行“双向绑定”'
     }
  }, 
});

JS中最主要的就是这句话
this.$emit('update:title', newVal)
其中update:myPropName 其中 myPropName 表示要更新的 prop (我的代码中写的是title)值。当然如果你不用 .sync 语法糖使用上面的 .$emit 也能达到同样的效果