v-model 是 Vue 内置的指令
作为属性接收一个变量(不能是常量)绑定到普通组件和自定义组件中
// 作为普通组件的属性, 只有作为表单内的元素属性时才会生效 如: input 、radio 、checkbox
// 作为自定义组件的属性
v-model 同时做了两件事情:属性绑定和自定义事件绑定
// 内置组件
// 相当于
// 自定义子组件
// 相当于
v-model 绑定在自定义组件上时,我们需要手动去接收
// 自定义组件
export default{
props: ['modelValue'], // 默认名称为 modelValue
emits: ['update:modelValue'] // Vue3 新增 emits, 用于接收父组件传递的自定义事件
}
v-model 默认绑定的属性名为:modelValue
v-model 默认绑定的事件名为:update:modelValue
// 所以我们需要使用 modelValue 和 update:modelValue 来接收
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
我们可以自定义 v-model 绑定的名称
// 父组件
// 使用 v-model:name 来自定义名称
// 子组件
export default {
props: ['msg'],
emits: ['update:msg']
}
注意:以上是 Vue3 中接收 v-model 的方法, Vue2 需要使用 model 来接收
v-model 的修饰符能够对绑定的数据做特定处理
Vue 中有内置的修饰符,如:.number 、.trim 、.lazy
v-model.number : v-model 绑定在表单组件中不会出现数值类型,numer 可以将绑定的字符串转换为数值
v-model.trim : 去掉绑定数据左右两侧的空格
v-model.lazy : 表单组件绑定时生效,从原来绑定的 input 高频率触发事件改为 blur 低频率触发事件来提高性能
// 将输入的 string 类型转换为 number 类型
input 本身不管输入的是数字还是单词等都是 string 类型
Vue3 中可以通过 v-model.name 自定义修饰符
自定义的修饰符需要在子组件中用 props 接收 modelModifiers 对象,这个对象下面会有自定义属性,值为 true
// 没有重命名v-model,仅添加自定义修饰符
export default {
props:['modelValue', 'modelModifiers'],
emits: ['update:modelValue'],
created() {
console.log(this.modelModifiers.a) // 值为 true
}
}
如果自定义了 v-model 的名称,那么 modelModifiers 要改为 name + Modifiers
// 重命名 v-model ,并且添加自定义修饰符
export default {
props:['msg', 'msgModifiers'],
emits: ['update:msg'],
created() {
console.log(this.msgModifiers.a) // 值为 true
}
}
注意:Vue3 中取消了 v-bind 中的 .sync 修饰符
1:v-model 作为指令可以绑定在内置组件和自定义组件上
2:相当于绑定了 :modelValue 和 @update:modelValue ,需要在子组件中接收
3:v-model:name 重命名
4:v-modle.name 自定义修饰符,使用 props 的 Modifiers 接收
作者如果有不准确、错误的希望指出来
没有人希望传递不准确或错误的知识
先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦