深入理解.sync修饰符

什么时候可以用sync修饰符

看下面一个案例：

爸爸通过props向子组件传一个外部数据，告诉他自己有多少钱total。

当儿子要花钱的时候，注意不能直接在子组件里进行修改，因为这是外部数据。

正确做法应该是通知父亲，让父亲给钱，而不能自己把数据修改了。

于是子组件通过这段代码<button @click="$emit('update:money', money-100)">触发一个花钱事件，通知父亲需要多少钱。

同时，父组件应该监听这个事件，<Child :money="total" v-on:update:money="total = $event"/>。

当父亲得到儿子的通知时，才能决定是否打钱，而$event中存的就是儿子需要多少钱，用来获取$emit中的参数。

//App.vue
<template>
  <div class="app">
    App.vue 我现在有 {
  {total}}
    <hr>
    <Child :money="total" v-on:update:money="total = $event"/>
    <Child :money.sync="total"/>  //等价于上面的代码，相当于语法糖
  </div>
</te