uniappx中uts的defineprops如何使用

在uniappx中使用uts的defineProps时遇到问题，具体用法不太清楚。请问应该如何正确声明和使用props？是否需要特殊类型标注？能否提供一个简单的代码示例说明接收父组件传递参数的方法？

2 回复

在uniappx的uts中，使用defineProps定义组件属性：

const props = defineProps<{
  title: string
  count: number
  isActive?: boolean
}>()

使用时通过props.title访问。支持类型推断和可选参数。


在 UniApp X 中，defineProps 用于在 UTS 组件中声明和接收父组件传递的 props。以下是使用方法和示例：

基本语法

// 子组件中声明 props
const props = defineProps<{
  title: string,
  count: number,
  isActive: boolean
}>()

使用示例

  1. 声明 Props（子组件）：
// child-component.uvue
const props = defineProps<{
  message: string,
  value: number
}>()
  1. 传递 Props（父组件）：
<!-- parent-component.uvue -->
<child-component :message="hello" :value="42" />

特性说明

  • 类型安全：基于 TypeScript 语法，编译时检查类型
  • 默认值：通过解构赋值设置：
    const { title = "默认标题" } = defineProps<{ title?: string }>()
  • 只读属性：props 是响应式但不可直接修改

注意事项

  • 需在 <script setup> 语法中使用
  • 不支持复杂运行时类型检查
  • 使用 ? 标记可选属性（如 title?: string）

通过这种方式可以安全地在组件间传递数据，并享受完整的类型提示和校验。

回到顶部