uniappx uvue 如何使用defineprops

在UniAppX的uvue项目中，如何正确地使用defineProps来定义组件的props属性？我按照官方文档尝试了，但遇到了一些问题。具体来说，不清楚如何在uvue文件中定义props的类型和默认值，以及在父组件中如何传递这些props参数。希望有经验的朋友能分享一下正确的用法和示例代码。

2 回复

在uniappx uvue中，使用defineProps定义组件props：

<script setup>
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  }
})
</script>

然后在模板中直接使用：{{ title }} 或 {{ count }}


在 UniApp X 的 uvue 文件中，defineProps 用于声明组件的 props（属性），使组件能够接收父组件传递的数据。以下是使用方法：

基本语法

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

完整示例

<template>
  <view>
    <text>{{ props.title }}</text>
    <text>{{ props.count }}</text>
    <text v-if="props.isActive">激活状态</text>
  </view>
</template>

<script lang="ts">
export default {
  name: 'MyComponent',
  setup() {
    // 使用 TypeScript 接口定义 props 类型
    interface Props {
      title: string
      count: number
      isActive?: boolean
    }
    
    const props = defineProps<Props>()
    
    // 在组件逻辑中使用 props
    console.log(props.title)
    
    return {
      props
    }
  }
}
</script>

主要特点

  1. 类型安全：使用 TypeScript 泛型确保 props 类型正确
  2. 响应式：props 是响应式的，值变化时会自动更新视图
  3. 只读：props 不可在子组件中直接修改

使用注意事项

  • 必须在 setup() 函数内调用
  • 使用 TypeScript 时可获得完整的类型推断
  • 可选属性使用 ? 标记
  • 在模板中通过 props.xxx 访问

父组件调用示例

<template>
  <view>
    <MyComponent 
      title="Hello World" 
      :count="42" 
      :is-active="true"
    />
  </view>
</template>

这种方式提供了类型安全的 props 声明，有助于在开发阶段发现类型错误。

回到顶部