1
2
3
4
5
<div id="app">
    <div>父组件bar: {{bar}}</div>
    <comp :foo.sync="bar"></comp>
    <!-- <comp :foo="bar" @update:foo="val => bar = val"></comp> -->
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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" 的语法糖
.sync demo