1.1 vue 3 的v-model使用原理：

<child-comp v-model="msg" /> //可翻译为
<child-comp :modelValue="msg" @update:modelValue="msg=$event" /> 

单个数据双向绑定完整示例

//父组件代码
<child-comp v-model="name" />子组件代码：
<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>

vue3 使用特定的 modelValue ，避免 value 的占用，通过 update:modelValue 实现数据双向绑定。值得注意的是，vue3 移除了 model 选项。

1.2、多个 v-model 使用

在 vue3 一个组件可以使用多个 v-model ，统一了 vue2 的 v-model 和 .sync 修饰符。

使用原理：

<child-comp v-model:name="name" v-model:age="age" /> //可翻译为
<child-comp :name="name" @update:name="name=$event":age="age" @update:age="age=$event" /> 

实现多个数据双向绑定完整实例：

//父组件代码
<child-comp v-model:name="name" v-model:age="age" /> //子组件代码
<template><div><input type="text" v-model="newName"><input type="text" v-model="newAge"></div>
</template>
<script>
export default {props:{name:{type:String,default:''},age:{type:String,default:""}},emits:['update:name','update:age'],computed:{newName:{get:function(){return this.name},set:function(value){this.$emit('update:name',value)}},newAge:{get:function(){return this.age},set:function(value){this.$emit('update:age',value)}}}
}
</script>  

需要注意的是 script 中多了一个 emits 选项，你发现了吗？

vue3 组件的自定义事件需要定义在 emits 选项中，只要是自定义事件，就需要添加在 emits 中，否则会有警告。它的优点：

1. 如果与原生事件相同名时，事件就会被触发两次，如果在 emits 选项中加入时，当作自定义事件处理，只会触发一次。
2. 更好地指示组件的工作方式。
3. 可以校验对象形式的事件。

作者：前端人_倩倩
链接：https://juejin.cn/post/7025773427260653599
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。