【Vue2-ElementUI】:model、v-model、prop

一、示例代码!-- 1. :model 语法el-form 表单绑定 -- el-form :rulesinputRules :modelsearchForm refsearchForm ... !-- 2. prop 语法el-form-item 表单校验绑定 -- el-form-item label起始日期 propstartDate !-- 3. v-model 语法el-date-picker 输入控件双向绑定 -- el-date-picker v-model.trimsearchForm.startDate ... / /el-form-item el-form-item label结束日期 propendDate el-date-picker v-model.trimsearchForm.endDate ... / /el-form-item /el-form这三个语法是 Vue2 Element UI 表单开发的黄金三角缺一不可各自承担完全不同的核心职责下面逐个进行讲解。二、详解一:modelv-bind:model表单数据的根容器1. 语法本质:model是v-bind:model的缩写属于 Vue2 最基础的单向 Prop 绑定核心是「数据从父级页面单向传递给子组件el-form」子组件只能读取不能直接修改。2. 在代码里的作用代码中:modelsearchForm是 Element UIel-form组件的强制必填属性作用是把你在data()中定义的searchForm对象绑定为 el-form 的数据源作为整个表单的「数据根容器」让el-form能够读取searchForm里的字段值用于表单校验、数据回显、输入关联作为你后续发送接口请求的参数载体所有用户输入最终都会汇总到这个对象中直接传给后端。3. 代码的底层逻辑data()中定义了searchForm: {...}el-form通过:modelsearchForm拿到这个对象后就会把内部所有v-model绑定的字段都关联到这个对象上。当你点击「查询」按钮时最终发送给后端的请求参数就是这个searchForm对象// 代码里的查询方法 search(title) { // ... let query Object.assign( { pageIndex: (this.page - 1) * this.per_page, pageSize: this.per_page }, this.searchForm // 这里就是 :model 绑定的数据源直接作为接口参数 ) this.$axios({ method: post, url: Api.PT1721, params: query }) // ... }4. 核心特性单向数据流el-form只会读取searchForm不会直接修改它数据修改完全由内部的v-model完成只读性不能用v-model替换:model否则会破坏 Vue 单向数据流原则导致表单校验失效、数据错乱全局关联性el-form内部所有el-form-item、输入控件都依赖这个:model绑定的对象是整个表单的「数据底座」。5. 关键小细节那么如果Data()里的searchForm没有定义是空的呢例如data() { return { searchForm: {} // 空对象 } }其实这样依旧可以绑定查询条件发送给后端但是这根本原因是v-model虽然data中只有空对象searchForm: {}但v-model具有 「动态给对象添加属性并触发响应式」 的特殊能力所以数据能收集到。当你在页面输入内容或选择日期时通过事件触发赋值// 伪代码 this.searchForm.startDate 2026-04-06哪怕这个startDate属性在data里原本不存在Vue 也会动态给searchForm增加这个属性并且让它变成响应式的。所以数据确实能收集到提交时也能发给后端。虽然 数据收集v-model 能工作但 表单校验rules 是绝对会失效的。data里searchForm: {}没有startDate。Element UI 的校验逻辑它会在挂载瞬间去searchForm里找startDate字段。结果因为找不到Element UI 内部会报错通常是Cannot read property trigger of undefined或者直接完全忽略该字段的校验规则。searchForm: {}会出现的问题------------- 问题1假设你有一个编辑 / 回显的场景需要后端返回数据填充表单// 后端返回的数据 const res { endDate: 2026-04-10 } // 直接赋值 this.searchForm res如果你的data里定义了searchForm: { endDate: }没问题。但如果你的data里是searchForm: {}且你是靠v-model动态加字段第一次进入编辑页searchForm会有endDate显示正常。但是一旦你点击重置按钮执行this.searchForm {}清空。你的表单里的el-date-picker会瞬间变成NaN或Invalid Date因为 Vue 无法监听对象属性的删除这是 Vue 2 的限制导致组件内部状态混乱。------------- 问题2下次查询时候还会携带之前的查询条件比如你上次搜了 “张三”这次不输入点查询 → 依然带着userName张三只要data里的searchForm没有你输入的字段Vue 响应式系统监听不到这种动态属性的删除推荐正规写法1. data 里必须初始化所有字段data() { return { searchForm: { userName: , phone: , status: , startDate: , endDate: // 所有用到的字段都写出来 } } }2. 重置方法必须这样写reset() { // 直接重置为初始状态 this.searchForm { userName: , phone: , status: , startDate: , endDate: } }三、详解二v-model—— 输入控件的「双向同步器」1. 语法本质v-model是 Vue2内置的双向绑定语法糖底层等价于:value数据input数据$event.target.value自动实现「数据更新 → 视图刷新视图输入 → 数据同步」无需手动监听事件。在 Element UI 组件中v-model被封装为:valuechange适配日期选择器、下拉框等组件的输入逻辑。2. 代码里的作用代码中v-model.trimsearchForm.startDate/v-model.trimsearchForm.endDate是el-date-picker日期选择器的核心绑定属性作用是双向同步用户输入你在日期选择器中选择了日期v-model会自动把值更新到searchForm.startDate/searchForm.endDate中自动回显数据如果searchForm里有初始值v-model会自动把值渲染到日期选择器上实现编辑回显保证接口参数最新你在search()方法中做的日期校验this.searchForm.startDate - this.searchForm.endDate 0能拿到最新的用户选择值完全依赖v-model的自动同步。3. 代码的底层逻辑el-input加.trim修饰符作用是自动去除输入值的首尾空格。v-model绑定的searchForm.startDate和el-form :modelsearchForm是同一个对象这就实现了「输入控件 → 表单容器 → 接口参数」的完整数据链路用户选择日期→v-model 自动同步到 searchForm→el-form 读取 searchForm 做校验→search() 方法把 searchForm 作为参数发送给后端4. 核心特性双向绑定视图和数据双向自动同步改数据 改页面改页面 改数据输入控件专属所有用户输入类组件input、select、date-picker、radio、checkbox 等必须用v-model绑定修饰符支持.trim去空格、.number转数字、.lazy失焦同步优化输入体验接口请求核心收集用户输入的所有数据是保证接口参数准确的核心。5. 业务场景总结100% 的使用场景所有表单输入控件是前端收集用户输入的核心方式接口请求作用实时同步用户输入保证请求参数是最新、最准确的值核心价值告别手动监听input/change事件大幅简化表单开发。四、详解三prop—— 表单校验的「规则映射器」1. 语法本质prop是 Element UIel-form-item组件的专属属性本质是「表单校验规则的映射字段」作用是把el-form-item和:model绑定的对象中的某个字段、rules中的某条校验规则三者关联起来。2. 代码里的作用代码中propstartDate/propendDate是el-form-item的校验绑定属性作用是把当前el-form-item和:modelsearchForm中的startDate/endDate字段做绑定把当前el-form-item和你在data()中定义的inputRules校验规则中的startDate/endDate规则做绑定让el-form执行validate()校验时能精准找到对应的字段和规则完成校验、错误提示。3. 代码的底层逻辑在data()中定义了校验规则inputRules: { startDate: [ { required: true, message: 起始日期不能为空, trigger: blur } ], endDate: [ { required: true, message: 结束日期不能为空, trigger: blur } ] }当你给el-form-item写propstartDate时el-form就会自动做三件事从:modelsearchForm中读取startDate字段的值从inputRules中读取startDate对应的校验规则当用户触发blur失焦事件或调用this.$refs.searchForm.validate()时执行校验不符合规则就显示错误提示。如果不写prop属性el-form就无法找到对应的字段和规则表单校验会完全失效这是 Element UI 表单校验的核心要求。4. 核心特性el-form-item 专属仅用于el-form内部的el-form-item组件其他组件不支持校验映射核心是el-form表单校验生效的必要条件没有prop就没有校验字段一致性要求prop的值必须和:model绑定对象的字段名、rules中的规则名完全一致比如propstartDatesearchForm必须有startDate字段rules必须有startDate规则错误提示关联校验不通过时错误提示会自动显示在当前el-form-item下方和prop绑定的字段一一对应。5. 业务场景总结唯一使用场景Element UI el-form 表单的 el-form-item 组件用于表单校验接口请求作用保证用户输入符合业务规则避免无效数据发送给后端核心价值实现表单的自动化校验无需手动写校验逻辑大幅提升开发效率。五、三者核心区别对比维度:modelv-bind:modelv-modelprop语法本质单向 Prop 绑定v-bind 缩写双向绑定语法糖el-form-item 专属校验映射属性绑定对象el-form 表单组件输入控件el-date-picker/el-input 等el-form-item 表单项组件核心作用表单数据根容器承载所有接口参数输入控件双向同步收集用户输入校验规则映射让表单校验生效数据流向页面 → el-form单向只读输入控件 ↔ searchForm双向自动同步无数据传递仅做规则映射代码中的位置el-form :modelsearchFormel-date-picker v-modelsearchForm.startDateel-form-item propstartDate接口请求作用存储最终发送的请求参数同步用户输入保证参数最新校验输入合法性过滤无效请求是否必填el-form 必写否则表单无数据源输入控件必写否则无法收集输入有校验需求必写否则校验失效依赖关系是 v-model、prop 的数据基础依赖 :model 绑定的对象依赖 :model 和 rules 校验规则底层原理v-bind 单向传值:value input语法糖字段 - 规则 - 表单项的映射关联六、三者协同工作的完整链路我们用「日期查询表单」完整走一遍三者的协作流程步骤 1页面初始化data()中定义searchForm、inputRules等数据el-form通过:modelsearchForm绑定数据源通过:rulesinputRules绑定校验规则el-form-item通过propstartDate/propendDate把表单项、searchForm字段、inputRules规则三者关联el-date-picker通过v-modelsearchForm.startDate把输入控件和searchForm字段双向绑定。步骤 2用户操作选择日期用户在el-date-picker中选择起始日期v-model自动把选择的日期同步到searchForm.startDate中用户失焦时el-form根据propstartDate找到对应的字段和规则执行校验校验通过无错误提示校验不通过显示「起始日期不能为空」的错误提示。步骤 3点击「查询」按钮发送接口请求执行search()方法先做日期大小校验this.searchForm.startDate - this.searchForm.endDate 0调用this.$refs.searchForm.validate()触发表单校验el-form根据prop映射的规则校验searchForm中的字段校验通过后把searchForm拼接到query对象中作为接口参数发送给后端后端返回数据渲染到表格中完成一次完整的查询流程。步骤 4点击「重置」按钮执行resetForm()方法重置searchForm中的startDate/endDate字段v-model监听到searchForm数据变化自动清空el-date-picker的显示el-form调用resetFields()方法根据prop映射的字段清空校验状态移除错误提示。