一、什么是Props？
Props（Properties的缩写）是Uniapp中父组件向子组件传递数据的一种机制。它允许你将数据从父组件"向下传递"到子组件，实现单向数据流，是构建可复用组件的关键特性。
二、基本用法
1. 子组件定义props
在子组件的`export default`中，通过`props`属性定义接收的参数：
javascript
export default {
props: {
// 基础类型检测
title: String,
// 多种可能类型
likes: [String, Number],
// 必填且为字符串
username: {
type: String,
required: true
},
// 带默认值的数字
age: {
type: Number,
default: 18
}
}
}
2. 父组件传递props
在父组件的模板中使用子组件时，通过属性绑定的方式传递数据：
html
username="张三"
age="25"
/>
三、Prop类型验证
Uniapp支持丰富的prop验证：
javascript
props: {
// null和undefined会通过任何类型验证
propA:String, // String类型
propB:[String,Number],//多种类型
propC:{ //必填字符串
type:String,
required:true
},
propD:{ //带默认值的数字
type:Number,
default :100
},
propE:{ //自定义校验函数
validator(value){
return ['success','warning','danger'].includes(value)
}
}
}
四、动态Prop绑定
使用v-bind或简写":"可以动态绑定prop值：
html
<script>
export default{
data(){
return{
dynamicTitle:"这是动态"
}
}
}
</script>
五、单向数据流注意事项
1. 不要直接修改prop：因为Vue/Uniapp遵循单向数据流原则
2. 解决方案：
- 本地data属性：将prop作为初始值赋给data中的本地变量
javascript
data(){
return{
localData :this.propData
}
}
- 计算属性：基于prop创建派生值
javascript
computed:{
computedData(){
return this.propData + '处理后的'
}
}
3. 对象/数组引用问题：由于JavaScript特性，修改对象或数组内部属性会影响父级状态（应避免）
六、高级用法示例
1. Prop传函数实现子调父
html
<script>//子组件调用this.confirm()</script>
2.sync修饰符(类似v-model)
实现双向绑定的语法糖(需显式触发update事件):
html
this.$emit('update.count',newValue)
七 、最佳实践建议
1 .命名规范 ：推荐camelCase定义 ，kebab-case使用
js
props:{ myPropName:String}
2 .明确指定required和default提高可读性
3 .复杂对象提供完整的type定义及default函数返回
js
default(){
return {
name:'',
age :0
}
}
4 .为重要业务props添加详细注释说明用途及格式要求
八 、常见问题排查
Q ：为什么我的prop没接收到？
A ：检查 -拼写是否正确 -是否使用了正确的绑定语法(:) -控制台是否有验证警告
Q ：如何避免意外修改prop？
A ：严格遵循单向数据流原则 ，需要修改时先复制到data/computed中
Q ：TypeCheck不生效怎么办？
A ：检查type
文章点评