.sync作用.sync是一种语法糖，是一种方便写法，通过子组件$emit发射事件,然后通过父组件监听@on $even

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="author" content="陈如斌">
  <title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<div id="app">
  <div>
    爸爸的钱{{dadMoney}}
    <!-- <my-son :foo='dadMoney' @update:foo="dadMoney=$event"></my-son> -->
    
    <!-- <my-son :foo='dadMoney' v-on:foo="dadMoney=$event"></my-son> -->
    <my-son :foo.sync='dadMoney'></my-son>
  </div>
 
</div>
<script>
  // 逻辑  儿子(子组件) 管爸爸(父组件)要钱，要先通知爸爸,并且在爸爸这个示例上做出修改。
  Vue.component('my-son', {
      template: '<button @click="consume">花钱 </button>',
      data(){
        return{
          copyfoo:this.foo
        }
      },
      props:['foo'],
      methods: {
        consume() {
          this.$emit('update:foo',this.copyfoo-=100)
        }
      }
  });
  new Vue({
      el: '#app',
      data: {
        dadMoney: 10000}
  });
</script>
</body>
</html>

.sync是一种语法糖，是一种方便写法，通过子组件 $emit发射事件,然后通过父组件监听@on$ event 来实现子组件修改父组件的值。当然了尤大推荐使用@update。