sync实现父子组件数据同步

 父组件：

<template>
  <div>
      <div>小明的爸爸现在有{{ money }}元</div><br>

      <h2>不使用sync修饰符</h2>
      <!--
        :money  父组件给子组件传递props
        @update:money  给子组件绑定的自定义事件，只不过名字叫 update:money
        目前现在这种操作，其实和v-model很相似，可以实现父子组件数据同步
      -->
      <SyncChild1 :money="money" @update:money="money=$event"></SyncChild1><br>

      <h2>使用sync修饰符</h2>
      <hr>
      <!--
        :money.sync  1)父组件给子组件传递props[money]   2）给当前子组件绑定一个自定义事件，而且事件名称为 update:money
        可以实现父子组件数据同步
      -->
      <SyncChild2 :money.sync="money"></SyncChild2>
  </div>
</template>

<script>
import SyncChild1 from "@/views/communication/SyncTest/SyncChild1.vue";
import SyncChild2 from "@/views/communication/SyncTest/SyncChild2.vue";
export default {
    name: "Synctest",
    components:{SyncChild1,SyncChild2},
    data(){
        return{
            money:10000
        }
    }
}
</script>

子组件1：

<template>
  <div>
    <span>小明每次花100元</span>
      <button @click="$emit('update:money',money-100)">花钱</button>
      <span >爸爸还剩{{ money }}元</span>
  </div>
</template>

<script>
export default {
    name: "SyncChild1",
    props:['money'],
}
</script>

子组件2：

<template>
  <div>
      <span>小明每次花100元</span>
      <button @click="$emit('update:money',money-100)">花钱</button>
      <span >爸爸还剩{{money}}元</span>
  </div>
</template>

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