elementui prop
ElementUI Prop 基础概念
在 ElementUI 中，prop 是组件间传递数据的核心机制，常用于父子组件通信或表单组件的数据绑定。prop 是父组件向子组件传递数据的自定义属性，子组件通过 props 选项声明接收。
Prop 声明与使用
子组件中通过 props 选项声明可接收的属性。支持多种格式：
- 数组形式：简单列出属性名
props: ['title', 'content'] - 对象形式：可指定类型和默认值
props: { size: { type: String, default: 'medium' }, disabled: Boolean }
父组件通过属性绑定的方式传递数据：
<el-button :size="large" :disabled="true">提交</el-button>Prop 验证
ElementUI 组件库内置了完善的 prop 验证机制，开发者自定义组件时也可使用：
- 类型检查：支持原生构造函数（
String/Number/Boolean等）或自定义类 - 必填验证：
required: true - 默认值：
default函数或固定值 - 自定义验证：
validator函数
示例：
props: {
rating: {
type: Number,
validator(value) {
return value >= 0 && value <= 5
}
}
}表单组件中的特殊 Prop
ElementUI 表单组件（如 el-form-item）使用特定 prop：
model：表单数据对象（必须）rules：验证规则对象prop：对应表单域 model 的键名
示例：
<el-form :model="formData">
<el-form-item prop="username" :rules="[{ required: true }]">
<el-input v-model="formData.username"></el-input>
</el-form-item>
</el-form>动态 Prop
可通过 v-bind 动态设置 prop 值，适用于需要根据状态变化的场景：
<el-tooltip :content="dynamicContent" :placement="position">
<el-button>提示</el-button>
</el-tooltip>非 Prop 属性
未在 props 中声明的属性会默认绑定到组件的根元素上。可通过 inheritAttrs: false 禁用此行为，再通过 $attrs 手动控制绑定位置。
最佳实践
- 为重要 prop 添加详细验证规则
- 复杂对象建议使用对象形式的 prop
- 避免直接修改 prop 数据，使用事件通知父组件变更
- 表单类组件确保
model和prop路径正确对应
通过合理使用 prop 机制，可以构建出高内聚、低耦合的组件体系，充分发挥 ElementUI 的组件化优势。
