v-model双向绑定原理

父组件代码如下：

<template>
  <div>
    我是父组件: <input type="text" v-model="msg">
    <son-box v-model="msg"/>
  </div>
</template>
<script>
// 导入子组件
import SonBox from '@/components/son.vue'
export default {
name:'FatherBox',
components:{
    SonBox
},
data(){
    return{
        msg:'测试内容'
    }
}
}
</script>

子组件代码如下：

<template>
  <div>
    <!-- 子组件接收父传过来的数据，并侦听内容的更改状态 $event.target.value是获取当前子组件input框中的内容 -->
    我是子组件: <input type="text" :value="value" @input="changeValue($event.target.value)"/>
  </div>
</template>

<script>
export default {
  name: "SonBox",
  props: {
    value: {
      required: true,
    }
  },
   methods: {
        changeValue(value){
            // v-model语法糖，在设置子传父，时设置input事件，并携带value参数，修改父组件的数据实现双向数据绑定。
            this.$emit('input',value) //触发input事件，父组件接收input事件
        }
    },
};
</script>