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

竹秋…2024-11-17 22:31

坑：

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

一开始我是这样写的

html 复制代码

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

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

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

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

原因：

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

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

那么这样就会导致:

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

解决方法：

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

html 复制代码

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

🆗🦌