v-model实现父子组件数据同步

 父组件：

<template>
    <div>
        <h1>Vmodel组件</h1>
        <input type="text" v-model="msg">
        <span>{{ msg }}</span><br>
        <hr>

        <h2>v-model实现原理(vue2)</h2>
        <!--原生DOM当中是有oninput事件，它经常结合表单元素一起使用，当表单元素内容发生变化的时候就会发出一次回调
        vue2: 可以通过value与input事件实现v-model功能
        -->
        <input type="text" :value="msg" @input="msg = $event.target.value">
        <span>{{ msg }}</span>
        <hr>

        <!-- 深入学习v-model：实现父子组件数据同步（）实现父子组件通信-->
        <!-- :value是什么? 这是props，父子组件通信
              @input是什么？ 自定义事件
        -->
        <Vmodel1 :value="msg" @input="msg = $event"></Vmodel1>
        <Vmodel1 v-model="msg"></Vmodel1>
    </div>
</template>

<script>
import Vmodel1 from "@/views/communication/Vmodel/Vmodel1.vue";
export default {
    name: "Vmodel",
    components: {Vmodel1},
    data() {
        return {
            msg: "woaini"
        }
    }
}
</script>

子组件：

<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>