vue中.sync修饰符

sync有同步的意思
是个语法糖
先来一个案例，父组件的一个数据需要通过子组件的按钮进行+1操作
因为props选项传入值的是复制值，不能通过修改props传入的值而改变父组件的值（可以通过这个特点进行传入对象来修改，不推荐）

// 全局vue组件
Vue.component("my-comp", {
  template: `
  <div>
   <hr/>
  <span>内部{{innernum}}</span>
  <button @click="$emit('update:innernum',innernum+1)">+1</button>
  </div>
  `,
  props: ["innernum"]
});
new Vue({
  template: `
  <div id="app">
    <span>外部{{outnum}}</span>
    <my-comp :innernum.sync="outnum" />
    <!-- <my-comp :innernum="outnum" @update:innernum="outnum = $event"></my-comp> -->
  </div>
`,
  el: "#app",
  data: { outnum: 0 }
}).$mount("#app");

代码地址=====>>>>>>>>codesandbox.io/s/gallant-w…
可以看到.sync就是一个语法糖而已，将<my-comp :innernum="outnum" @update:innernum="outnum = $event"></my-comp>完整语句简化了
要点就是子组件内创建事件，将修改后的值放入全局变量$event中，父组件内触发然后获取，与EventBus类似
双向绑定也是用到的这个方法，只是双向绑定只是同步了数据，并没有修改数据

注意

如果需要使用sync，$emit() 里面事件名是特定写法update:子组件props参数名