vue3 defineprops 默认值
时间: 2025-05-23 07:03:35 浏览: 33
### Vue3 中为 `defineProps` 设置默认值的方法
在 Vue3 的组合式 API (`Composition API`) 中,可以使用 `<script setup>` 语法糖简化组件定义过程。通过 `defineProps` 定义组件的 Props 并为其设置默认值的方式有多种。
#### 方法一:直接在 `defineProps` 中指定默认值
如果不需要 TypeScript 类型支持,可以直接在 `defineProps` 对象中为每个 Prop 提供 `default` 属性[^1]:
```javascript
<script setup>
const props = defineProps({
message: {
type: String,
default: 'Hello, World!'
},
count: {
type: Number,
default: 0
}
});
</script>
<template>
<div>{{ message }} - Count: {{ count }}</div>
</template>
```
在此示例中,`message` 和 `count` 都设置了默认值,当父组件未传递这些属性时会自动采用默认值[^1]。
---
#### 方法二:结合 TypeScript 使用 `withDefaults`
对于需要 TypeScript 支持的情况,推荐使用 `withDefaults` 函数来设置默认值[^2][^3]。以下是具体实现方式:
```typescript
<script lang="ts" setup>
import { withDefaults, defineProps } from 'vue';
interface Props {
name?: string;
age?: number;
}
// 定义 Props 并设置默认值
const props = withDefaults(defineProps<Props>(), {
name: 'Unknown',
age: 18
});
</script>
<template>
<div>Name: {{ props.name }} | Age: {{ props.age }}</div>
</template>
```
在这个例子中,`name` 默认值为 `'Unknown'`,而 `age` 默认值为 `18`。即使父组件未传递这两个属性,它们也会显示对应的默认值[^2]。
---
#### 方法三:动态计算默认值
除了静态默认值外,还可以通过函数动态生成默认值。例如:
```typescript
<script lang="ts" setup>
import { withDefaults, defineProps } from 'vue';
interface Props {
greeting?: (name: string) => string;
}
const props = withDefaults(defineProps<Props>(), {
greeting: () => (name: string) => `Hello, ${name}!`
});
</script>
<template>
<div>Greeting: {{ props.greeting('Vue') }}</div>
</template>
```
此代码片段展示了如何将一个函数作为默认值传递给 `greeting` 属性[^3]。
---
### 注意事项
- 如果使用的是脚本标签而非 `<script setup>`,则需手动调用 `toRefs` 或解构赋值以访问响应式的 Props 值。
- 当前方法适用于 Vue3 组合式 API 场景;选项式 API 则继续沿用传统的 `props` 定义方式。
---
阅读全文
相关推荐


















