Vue 组件 .sync 修饰符

今天看vue官网的sync修饰符有点不理解，发现这篇解决了我的疑惑，故转载一下

<div id="app">
    <div>父组件bar: {{bar}}</div>
    <comp :foo.sync="bar"></comp>
    <!-- <comp :foo="bar" @update:foo="val => bar = val"></comp> -->
</div>

<script>
Vue.component('comp', {
  template: '<div><button @click="increment">点我更新子组件foo++</button><div>子组件foo: {{foo}}</div></div>',
  props: ['foo'],
  methods: {
    increment: function() {
      this.foo++;
      this.$emit('update:foo', this.foo);
    }
  }
});

new Vue({
  el: '#app',
  data: {bar: 0}
});
</script>

:foo.sync="bar" 实际就是 :foo="bar" @update:foo="val => bar = val" 的语法糖

转自：https://www.jianshu.com/p/5bde35206dd0