vue3+element-plus==> el-form输入响应式失效踩坑!!!!!!!!!!

坑:

这个坑我是真没想到,找了半天原因...

一开始我是这样写的

html 复制代码
<el-form :model="addForm" label-width="100px" ref="addForm">
    <!-- 表单内容 -->
</el-form>

输入框根本输入不了东西,或者有很高的延迟,不知道什么时候自己填进去了

用vue2的时候图方便一直都是这样写的

后面查了半天才发现,vue3就是不能这样写了

原因:

在 Vue 2 中,v-model 是通过 value 属性和 input 事件来实现双向绑定的,而 ref 是一个引用组件实例的方式,通常用来获取组件的实例,以便在父组件中访问和操作它。它们本质上不冲突 ,可以同时存在,因为 v-modelref没有 直接干扰彼此的功能。

但在vue3中,v-model 被重新设计了 。它不仅可以绑定一个值,还可以传递自定义的事件名称和 prop 名称。例如,你可以为 v-model 使用 modelValue 作为 prop,且它会自动监听 update:modelValue 事件。

那么这样就会导致:

refv-model 的冲突: 在 Vue 3 中,ref 用来引用组件实例,而 v-model 会通过 prop 和事件的方式来实现双向绑定,因此它们都需要依赖于 组件的 propsevents。如果你将 refv-model 同时绑定到同一个表单组件上,Vue 会产生冲突 ,因为它们在底层的实现上会干扰同一状态的操作。

解决方法:

其实ref 和 v-model设置不一样的值就好了

html 复制代码
<el-form :model="addForm" label-width="100px" ref="addFormRef">
  <!-- 表单内容 -->
</el-form>

🆗🦌

相关推荐
练习前端两年半1 小时前
Vue3 源码深度剖析:有状态组件的渲染机制与生命周期实现
前端·vue.js
吃饭睡觉打豆豆嘛1 小时前
彻底搞懂前端路由:从 Hash 到 History 的演进与实践
前端·javascript
lbh2 小时前
简单文本编辑器:基于原生JavaScript的智能文本选择工具栏
前端·javascript
典学长编程2 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第三天(JavaScript)
前端·javascript·css·html·前端开发
533_4 小时前
[vue3 echarts] echarts 动态数据更新 setInterval
vue.js·echarts
Jimmy5 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
Spider_Man5 小时前
栈中藏玄机:从温度到雨水,单调栈的逆袭之路
javascript·算法·leetcode
jstart千语5 小时前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
BUG收容所所长5 小时前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
盗德5 小时前
Vue渲染引擎的范式革命:从虚拟DOM到Vapor模式
前端·vue.js