vue2 与vue3 中v-model的区别

vue2

在Vue2中,可以在子组件标签上用v-model来实现父子组件之间的双向通信,它的本质是"v-bind:value"与"v-on:input"的结合。这也就意味着一个子组件标签上只能有一个v-model,如果想绑定其他属性和自定义事件的组合,就需要用.sync修饰符来实现。

vue3

在Vue3中去除了.sync语法,将v-model语法设计为可以绑定任意属性和任意自定义事件的组合,这样在一个子组件标签上就可以使用多个v-model了。

Vue3将v-model的设计原理进行了改造,v-model不再单纯是"v-bind:value"与"v-on:input"的结合,已经演化为"v-bind:modelValue"与"v-on:['update:modelValue']"的结合,直接绑定modelValue并且监听update:modelValue就可以实现v-model双向数据绑定的操作。

相关推荐
IT_陈寒16 分钟前
深入理解JavaScript:核心原理与最佳实践
前端·人工智能·后端
MrGud21 分钟前
Cesium中的坐标系及其转换
前端·cesium
小付学代码22 分钟前
香港地图可编辑版
前端
兆子龙34 分钟前
TypeScript高级类型编程:从入门到精通
前端·后端
SuperEugene36 分钟前
Vue3 模板语法规范实战:v-if/v-for 不混用 + 表达式精简,避坑指南|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
IT_陈寒42 分钟前
Python开发者的效率革命:这5个技巧让你的代码提速50%!
前端·人工智能·后端
Luna-player43 分钟前
Vue 3 + Vue Router 的路由配置,简单示例
前端·javascript·vue.js
用户693717500138444 分钟前
不卷AI速度,我卷自己的从容——北京程序员手记
android·前端·人工智能
xiaotao1311 小时前
03. 原子化 CSS 思想
前端·css·tailwind