element-ui中的prop 的相关作用

在Element UI中，prop属性是用于Vue组件定义数据字段的一个属性，它主要用于指定表单数据源和表单的校验规则。

当你使用Element UI的表单组件如el-input, el-select等时，你可以通过v-model指令绑定组件的prop属性到你的数据对象上。这样，表单的值就会与数据对象同步，也可以通过数据对象来控制表单项的值。

例如，假设你有一个Vue组件，其数据对象包含formData对象，你可以这样使用el-input组件：

<template>
  <el-form :model="formData">
    <el-form-item label="用户名">
      <el-input v-model="formData.username" prop="username"></el-input>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        // 其他字段...
      },
      // 校验规则...
    };
  },
};
</script>

在这个例子中，formData对象有一个username属性，el-input组件通过v-model指令与formData.username绑定，同时通过prop="username"告诉Element UI该表单项的数据来源是username属性。

当你使用表单验证功能时，prop属性就用于指定哪个数据字段需要验证，以及验证规则是什么。

<el-form :model="formData" :rules="rules">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
</el-form>

在这个例子中，:rules="rules"定义了一个表单验证规则对象，它可能包含username字段的验证规则。

总结：prop属性在Element UI中用于指定表单字段的数据源，以及在使用表单验证时指定要验证的字段。