Vue | Element:请教 el-form 的 :model 属性的作用

Question

<template>

    <div>

        <el-form :model="form" :rules="form" label-width="80px">

            <el-form-item label="姓名">

                <el-input v-model="form.name"></el-input>

            </el-form-item>

        </el-form>

    </div>

</template>

<script>

    export default {

        name: 'Father',

        data () {

            return {

                form: {

                    name: 'Tim' 

                }

            }

        }

    }

</script>

el-form 设置了 :model、:rules 两个属性，:rules 似乎是后续表单校验时需要使用，那 :model 属性的作用是什么呢？

官方文档将 el-form 的 model 属性描述为"表单数据对象"，但如果不配置该属性，仅通过 v-model="form.name" 为表单域设置值已经可以实现数据绑定，为什么还要为 el-form 配置 model 这个属性呢？

---------------------------------- 分割线 -----------------------------------------------

<template>

    <div>

        <el-form :rules="rules" label-width="80px">

            <el-form-item label="姓名" prop="name">

                <el-input v-model="form.name"></el-input>

            </el-form-item>

        </el-form>

    </div>

</template>

<script>

    export default {

        name: 'App',

        data () {

            return {

                form: {

                    name: 'Tim' 

                },

                rules: {

                    name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]

                }

            }

        }

    }

</script>

Answer 1

以下表单指input或el-input这些，而el-form或el-form-item则会直接写明。1、确实，在表单中有个v-model绑定后，el-form的model有没有一点都不影响，你可以删除不写。2、目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。不信的话，你可以增加一个rules和prop(为了调用验证方法，也el-form也加一个ref属性，相当于id或者class选择器的意思)，但是不写model，然后验证的话，会提示缺少model，导致无法验证成功。所以el-form的model干嘛用的？目前看来主要是为了配合表单验证。里面的逻辑大概是，在el-form-item上写一个prop，这个prop左手对应着数据源（即用model.prop找到对应的数据源），右手对应着验证规则（即用rules.prop找到对应的规则）。然后就快乐地验证去了。至于为什么不能将el-form的model+el-form-tem的prop这样的组合和表单中的v-model的用法合二为一，最直观的原因就是：这几个玩意是加在不同的标签上的啊，一种是针对表单的双向绑定，一种是针对el-form和el-form-item的验证（虽然这个验证的数据源最终就是表单那边双向绑定得来的）；其次，你感觉一下，一边是利用双向绑定提供数据，另一边是拿到数据和规则进行验证，这两边没有很死板地捆绑在一起啊，类似于耦合度不高，未来自定义或者修改的话会方便很多。

Answer 2

与数据绑定无关,rules验证是对model对象的验证，跟你在form中绑定了哪些数据无关