uniapp defineprops 的用法详解

我在学习uniapp时遇到了defineprops的使用问题，想请教下具体用法：

  1. defineprops的基本语法和参数该怎么写？
  2. 如何定义默认值、类型校验和必填项？
  3. 父子组件传值时，defineprops接收的数据在子组件中如何正确使用？
  4. 和vue2的props选项相比，defineprops在uniapp中有哪些差异或注意事项？
  5. 能否给一个完整的代码示例说明典型场景下的用法？
2 回复

uniapp中defineProps用于定义组件的props，接收类型声明对象。支持String、Number、Boolean、Array、Object等类型，可设置默认值和校验规则。

示例：

defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  }
})

在模板中直接使用props数据即可。


UniApp 中的 defineProps 用于在 Vue 3 的 Composition API 中声明组件的 props，适用于使用 <script setup> 语法。它提供类型推断和默认值设置，简化 props 定义。

基本用法

在 <script setup> 中直接使用 defineProps 定义 props：

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

// 使用 props
console.log(props.title);
</script>

使用 TypeScript 类型注解

通过泛型提供类型支持（推荐在 TypeScript 项目中使用）：

<script setup lang="ts">
interface Props {
  title: string;
  count?: number;
  isActive: boolean;
}

const props = defineProps<Props>();
</script>

设置默认值

使用 withDefaults 编译器宏为 TypeScript 类型 props 设置默认值：

<script setup lang="ts">
interface Props {
  title?: string;
  count: number;
}

const props = withDefaults(defineProps<Props>(), {
  title: '默认标题',
  count: 10
});
</script>

注意事项

  1. 仅适用于 <script setup>：传统 Options API 使用 props 选项。
  2. 无需导入：defineProps 是编译器宏，自动可用。
  3. 响应性：props 是响应式的，但不要直接解构（使用 toRefs 如需解构）。
  4. 类型检查：在开发模式下，UniApp 会验证传递的 props 类型。

示例：完整组件

<template>
  <view>
    <text>{{ title }}</text>
    <text>{{ count }}</text>
    <text>{{ isActive ? '激活' : '未激活' }}</text>
  </view>
</template>

<script setup lang="ts">
interface Props {
  title: string;
  count?: number;
  isActive: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  count: 5,
  isActive: false
});
</script>

通过 defineProps，可以高效管理组件属性，提升代码可读性和类型安全。

回到顶部