案例

子组件：

<template>
    <div>
        {{ money }}
        <button @click="$emit('update:money',money - 100)"></button>    
        //$emit() ：子组件向父组件传递事件，可以理解为封装好的eventBus
    </div>
</template>

<script>
  export default{
    props:[ "money" ]
}
</script>

父组件：

import Child from ...

<template>
  <div class="app">
     我现在有 {{total}}
    <hr>
    <Child :monye.sync="total" />    
    // <Child :monye="total" v-on:update:money="total = $event" /> ,
    监听子组件的''update:money"事件，$evnent存的是触发完子组件事件(也就是子组件进行完money - 100)后相对应的值
  </div>
  ...  
  import Child from ...
  
  data(){
    return { total:10000 }
  }
  components:{...}
</template>

子组件props的数据是从父组件得到的，因此子组件无法直接改变数据。子组件会触发一个事件，会将事件结束后的值传给event的值。最后再将改变好的值传给子组件。这一系列的过程被简化成了语法糖，即.sync修饰符。

image.png