Vue2+ElementUI教程之model、v-model、prop详解

一、示例代码

<!-- 1. :model 语法：el-form 表单绑定 -->
<el-form :rules="inputRules" :model="searchForm" ref="searchForm" ...>

  <!-- 2. prop 语法：el-form-item 表单校验绑定 -->
  <el-form-item label="起始日期" prop="startDate">
    <!-- 3. v-model 语法：el-date-picker 输入控件双向绑定 -->
    <el-date-picker v-model.trim="searchForm.startDate" ... />
  </el-form-item>

  <el-form-item label="结束日期" prop="endDate">
    <el-date-picker v-model.trim="searchForm.endDate" ... />
  </el-form-item>

</el-form>

这三个语法，是 Vue2 + Element UI 表单开发的黄金三角，缺一不可，各自承担完全不同的核心职责，下面逐个进行讲解。

二、详解一：:model（v-bind:model）表单数据的根容器

1. 语法本质

:model 是 v-bind:model 的缩写，属于 Vue2 最基础的单向 Prop 绑定，核心是「数据从父级（页面）单向传递给子组件（el-form）」，子组件只能读取，不能直接修改。

2. 在代码里的作用

代码中 :model="searchForm" 是 Element UI el-form 组件的强制必填属性，作用是：

• 把你在 data() 中定义的 searchForm 对象，绑定为 el-form 的数据源，作为整个表单的「数据根容器」；
• 让 el-form 能够读取 searchForm 里的字段值，用于表单校验、数据回显、输入关联；
• 作为你后续发送接口请求的参数载体，所有用户输入最终都会汇总到这个对象中，直接传给后端。

3. 代码的底层逻辑

data() 中定义了 searchForm: {...}，el-form 通过 :model="searchForm" 拿到这个对象后，就会把内部所有 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: {} // 空对象
  }
}

其实这样依旧可以绑定查询条件发送给后端，但是！！！

这根本原因是 虽然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 被封装为 :value + @change，适配日期选择器、下拉框等组件的输入逻辑。

2. 代码里的作用

代码中 v-model.trim="searchForm.startDate" / v-model.trim="searchForm.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 :model="searchForm" 是同一个对象，这就实现了「输入控件 → 表单容器 → 接口参数」的完整数据链路：用户选择日期 → 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 UI el-form-item 组件的专属属性，本质是「表单校验规则的映射字段」，作用是把 el-form-item 和 :model 绑定的对象中的某个字段、rules 中的某条校验规则，三者关联起来。

2. 代码里的作用

代码中 prop="startDate" / prop="endDate"，是 el-form-item 的校验绑定属性，作用是：

• 把当前 el-form-item，和 :model="searchForm" 中的 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 写 prop="startDate" 时，el-form 就会自动做三件事：

• 从 :model="searchForm" 中，读取 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 中的规则名完全一致（比如 prop="startDate"，searchForm 必须有 startDate 字段，rules 必须有 startDate 规则）；
• 错误提示关联：校验不通过时，错误提示会自动显示在当前 el-form-item 下方，和 prop 绑定的字段一一对应。

5. 业务场景总结

• 唯一使用场景：Element UI el-form 表单的 el-form-item 组件，用于表单校验；
• 接口请求作用：保证用户输入符合业务规则，避免无效数据发送给后端；
• 核心价值：实现表单的自动化校验，无需手动写校验逻辑，大幅提升开发效率。

五、三者核心区别

六、三者协同工作的完整链路

我们用「日期查询表单」，完整走一遍三者的协作流程：

步骤 1：页面初始化

• data() 中定义 searchForm、inputRules 等数据；
• el-form 通过 :model="searchForm" 绑定数据源，通过 :rules="inputRules" 绑定校验规则；
• el-form-item 通过 prop="startDate"/prop="endDate"，把表单项、searchForm 字段、inputRules 规则三者关联；
• el-date-picker 通过 v-model="searchForm.startDate"，把输入控件和 searchForm 字段双向绑定。

步骤 2：用户操作（选择日期）

• 用户在 el-date-picker 中选择起始日期；
• v-model 自动把选择的日期，同步到 searchForm.startDate 中；
• 用户失焦时，el-form 根据 prop="startDate" 找到对应的字段和规则，执行校验；
• 校验通过，无错误提示；校验不通过，显示「起始日期不能为空」的错误提示。

步骤 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 映射的字段，清空校验状态，移除错误提示。

总结 

到此这篇关于Vue2+ElementUI教程之model、v-model、prop详解的文章就介绍到这了,更多相关ElementUI之model、v-model、prop内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！