我们知道响应式数据是vue的一个特点，通过v-mold能够实现数据的实时响应，但是我们也应该清楚v-model 是语法糖，本质还是父子组件间的通信。
其实质上还是通过 props，父组件给子组件传值再通过 Events up，子组件使用 $emit 触发事件将数据传回给父组件。
vue2.x
//父组件
<child v-model="msg"></child>
//子组件
<template>
<div>
<input type="text" v-model="newValue">
</div>
</template>
<script>
export default {
props:{
value:{
type:String,
default:''
}
},
computed:{
newValue:{
get:function(){
return this.value
},
set:function(value){
this.$emit('input',value)
}
}
}
}
</script>
//所以父组件中子组件可以看成是这样的
<child :value="msg" @input="msg=$events"></child>
vue3.x
//父组件代码
<child v-model="name"></child>
//子组件代码：
<template>
<input type="text" v-model="newValue">
</template>
<script>
export default {
props:{
modelValue:{
type:String,
default:''
}
},
computed:{
newValue:{
get:function(){
return this.modelValue
},
set:function(value){
this.$emit('update:modelValue',value)
}
}
}
}
</script>
//上面的子组件在父组件中实质上是：
<child-comp :modelValue="msg" @update:modelValue="msg=$event"></child>
tips
.sync修饰符
//在vue2.x中当需要多个value作为v-mold绑定的时候，可以用.sync修饰符来拓展
<child v-model="name" :age.sync="age"></child>
//而在vue3.x中，则没有这个限制，可以使用v-mold直接绑定多个
<child v-model:name="name" v-model:age="age"></child>
//子组件中
emits:['update:name','update:age'],
/*vue3 组件的自定义事件需要定义在 emits 选项中，只要是自定义事件，就需要添加在 emits 中
如果与原生事件相同名时，事件就会被触发两次，如果在 emits 选项中加入时，当作自定义事件处理，只会触发一次*/
