el-input无法输入

将model和ref分别设置为不同的名称

el-form中的model属性是用于双向绑定表单数据的,它会自动收集内部所有表单项的value进行绑定。

ref属性是用于获取el-form组件实例的引用的。

如果两个属性名称相同,在内部会导致逻辑混乱。因为:

• model的改变会更改组件实例上的同名属性的值,使ref引用变成model的值而不是组件实例。
• 如果修改了ref的值,也会反过来改变model,产生副作用。

1. Vue的响应式原理是通过依赖收集来追踪数据变化重新渲染,如果model和ref同名,会导致两个响应式链接混乱,使依赖关系追踪困难。
2. 所以为了避免property name冲突,el-form要求model和ref必须不同名,这是一种防止混乱的设计。