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

坑：

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

一开始我是这样写的

<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设置不一样的值就好了

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

🆗🦌

原文地址：https://blog.csdn.net/weixin_46112174/article/details/143743561

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！