「VUE 3」 v-model 的使用变化

我们知道响应式数据是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 选项中加入时，当作自定义事件处理，只会触发一次*/