vue3兼容vue2代码吗（3分钟认识Vue3的v-model）

时间2025-06-19 07:40:17分类IT科技浏览5215

导读：1：什么是 v-model v-model 是 Vue 内置的指令...

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 修饰符

总结

1：v-model 作为指令可以绑定在内置组件和自定义组件上

2：相当于绑定了 :modelValue 和 @update:modelValue ，需要在子组件中接收

3：v-model:name 重命名

4：v-modle.name 自定义修饰符，使用 props 的 Modifiers 接收

作者如果有不准确、错误的希望指出来

没有人希望传递不准确或错误的知识

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。