下午在用Element UI写一个表单的时候突然发现，表单的验证规则失效了

使用Element自带的表单校验规则时，表单为空的时候下方有提示信息，表单不为空的时候依然有提示信息

 

查看资料找到几种方式都不管用

一种是检查<el-form-item>中的prop值和<el-input>的v-model的值是否一致，这里是保持一致的但还是不行

<el-form ref="emailForm" v-model="Form" :rules="rules">
  <el-form-item label="用户名" prop="userName" label-width="200px" style="width: 70%">
      <el-input v-model="Form.userName" clearable placeholder="请输入用户名"/>
   </el-form-item>
 </el-form>

另外一种是检查<el-form>标签里v-model和 :rules与data里的数据是否保持一致,检查之后没有错，但还是不行

    rules: {
        userName  : [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      }

最后，从头到尾仔细看了一遍之后突然发现<el-form>中的v-model有问题，正确的用法应该是:model，修改之后发现表单果然变正常了

经过一番研究发现:model和v-model的区别

        :model 是v-bind:model的缩写，这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。