3分钟带你快速认识Vue3中的v-model
作者：米西呀
1：什么是 v-model
v-model 是 Vue 内置的指令
作为属性接收一个变量（不能是常量）绑定到普通组件和自定义组件中
// 作为普通组件的属性, 只有作为表单内的元素属性时才会生效 如： input 、radio 、checkbox <template> <input v-model='value' /> </template>
// 作为自定义组件的属性 <template> <son-component v-model='value'></son-component> </template>
v-model 同时做了两件事情：属性绑定和自定义事件绑定
// 内置组件 <template> <input type='text' v-model='value' /> // 相当于 <input type='text' :value='value' @input='value = $event.target.value' /> </template>
// 自定义子组件 <template> <son-component v-model='value'></son-component> // 相当于 <son-component :modelValue='value' @update:modelValue='value = $event'></son-component> <template>
v-model 绑定在自定义组件上时，我们需要手动去接收
// 自定义组件
export default{
props: ['modelValue'], // 默认名称为 modelValue
emits: ['update:modelValue'] // Vue3 新增 emits， 用于接收父组件传递的自定义事件
}
2：v-model 的扩展
1：自定义名称
v-model 默认绑定的属性名为：modelValue
v-model 默认绑定的事件名为：update:modelValue
// 所以我们需要使用 modelValue 和 update:modelValue 来接收
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
我们可以自定义 v-model 绑定的名称
// 父组件 <template> <son-component v-model:msg='msg'></son-component> // 使用 v-model:name 来自定义名称 </template>
// 子组件
export default {
props: ['msg'],
emits: ['update:msg']
}
注意：以上是 Vue3 中接收 v-model 的方法， Vue2 需要使用 model 来接收
2：内置修饰符
v-model 的修饰符能够对绑定的数据做特定处理
Vue 中有内置的修饰符，如：.number 、.trim 、.lazy
v-model.number ： v-model 绑定在表单组件中不会出现数值类型，numer 可以将绑定的字符串转换为数值
v-model.trim ： 去掉绑定数据左右两侧的空格
v-model.lazy ： 表单组件绑定时生效，从原来绑定的 input 高频率触发事件改为 blur 低频率触发事件来提高性能
<template> <input type='text' v-model.number='value' /> // 将输入的 string 类型转换为 number 类型 input 本身不管输入的是数字还是单词等都是 string 类型 </template>
3：自定义修饰符
Vue3 中可以通过 v-model.name 自定义修饰符
自定义的修饰符需要在子组件中用 props 接收 modelModifiers 对象，这个对象下面会有自定义属性，值为 true
// 没有重命名v-model，仅添加自定义修饰符 <template> <son-component v-model.a='msg' /> </template>
export default {
props:['modelValue', 'modelModifiers'],
emits: ['update:modelValue'],
created() {
console.log(this.modelModifiers.a) // 值为 true
}
}
如果自定义了 v-model 的名称，那么 modelModifiers 要改为 name + Modifiers
// 重命名 v-model ，并且添加自定义修饰符 <template> <son-component v-model:msg.a='msg' /> </template>
export default {
props:['msg', 'msgModifiers'],
emits: ['update:msg'],
created() {
console.log(this.msgModifiers.a) // 值为 true
}
}
注意：Vue3 中取消了 v-bind 中的 .sync 修饰符
补充：多个 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 中，否则会有警告。它的优点：
- 如果与原生事件相同名时，事件就会被触发两次，如果在 emits 选项中加入时，当作自定义事件处理，只会触发一次。
- 更好地指示组件的工作方式。
- 可以校验对象形式的事件。
总结
1：v-model 作为指令可以绑定在内置组件和自定义组件上
2：相当于绑定了 :modelValue 和 @update:modelValue ，需要在子组件中接收
3：v-model:name 重命名
4：v-modle.name 自定义修饰符，使用 props 的 Modifiers 接收
到此这篇关于Vue3中v-model的文章就介绍到这了,更多相关Vue3的v-model内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！