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双向数据绑定的操作。

相关推荐
李广山Samuel2 小时前
Node-OPCUA 入门(1)-创建一个简单的OPC UA服务器
javascript
zhongjiahao2 小时前
一文带你了解前端全局状态管理
前端
柳安2 小时前
对keep-alive的理解,它是如何实现的,具体缓存的是什么?
前端
keyV2 小时前
告别满屏 v-if:用一个自定义指令搞定 Vue 前端权限控制
前端·vue.js·promise
X_Eartha_8152 小时前
前端学习—HTML基础语法(1)
前端·学习·html
如果你好2 小时前
一文搞懂事件冒泡与阻止方法:event.stopPropagation() 实战指南
前端·javascript
用户8168694747252 小时前
深入 useMemo 与 useCallback 的底层实现
前端·react.js
AAA简单玩转程序设计2 小时前
救命!Java 进阶居然还在考这些“小儿科”?
java·前端
www_stdio2 小时前
我的猫终于打上冰球了——一个 Vue3 + Coze AI 项目的完整落地手记
javascript·vue.js·coze