uniapp中props的用法

一、基本该概念

Props 是父组件向子组件传递数据的桥梁，子组件通过定义 props 接收父组件的数据

二、定义方式

1、简单类型定义（数组形式）

// 子组件定义
props: ['name', 'age']

// 父组件使用

2、对象类型定义（推荐）

props: {
  name: {
    type: String,
    default: 'Guest',
    required: true
  },
  age: {
    type: Number,
    validator: (value) => value >= 0
  }
}

三、类型验证

支持的类型：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

四、默认值设置

// 基础类型默认值
age: {
  type: Number,
  default: 0
}

// 对象/数组默认值（需通过工厂函数返回）
userInfo: {
  type: Object,
  default: () => ({ name: 'Guest' })
}

五、必传验证 

name: {
  type: String,
  required: true
}

六、自定义验证 

email: {
  type: String,
  validator: (val) => {
    const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
    return emailRegex.test(val)
  }
}

 七、使用场景

1、动态数据绑定

2、单向数据流

• 子组件不能直接修改 props
• 需通过 $emit 触发父组件方法更新

3、接收任意类型

content: null // 不指定类型，接收任意类型

八、注意事项 

1、驼峰命名转换

// 子组件定义
props: { myProp: String }

// 父组件使用（HTML标签需转为短横线命名）

2、数组/对象解构 

// 子组件使用解构
const { name, age } = props

3、监听props变化

watch: {
  propsData: {
    handler(newVal, oldVal) {
      // 处理变化
    },
    deep: true
  }
}

 九、最佳实践

1. props 命名建议使用驼峰式
2. 复杂对象使用对象形式定义
3. 始终设置合理的默认值
4. 必要时添加类型验证和自定义校验
5. 避免在子组件直接修改 props 值

示例代码：

父组件：

子组件：