ElementUI中＜el-form＞标签中 ref、:model、:rules 的作用

最新推荐文章于 2024-08-17 17:56:24 发布

品克缤

最新推荐文章于 2024-08-17 17:56:24 发布

阅读量2.1w

点赞数 38

文章标签： elementui javascript 前端 vue.js vue

本文链接：https://blog.csdn.net/m0_46893049/article/details/126126414

版权

首先看一下代码

<el-form
      ref="loginForm"
      :model="loginInfo"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >

ref 属性涉及Dom 元素的获取(el-form表单对象)。
javaSrcipt 获取Dom 元素是通过：document.querySelector（".input"）获取dom元素节点。
Vue 为简化DOM获取方法提出了ref 属性和$refs 对象。一般的操作流程是:ref 绑定控件，$refs 获取控件。

Element官方文档中写到：

model是表单数据对象，rules是表单验证规则。

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

里面的逻辑大概是，在el-form-item上写一个prop，这个prop左手对应着数据源（即用model.prop找到对应的数据源），右手对应着验证规则（即用rules.prop找到对应的规则），然后进行验证。