Skip to content

defineProp

稳定性: 实验性 ⚠️ 实验性功能,风险自负

使用 defineProp 逐个声明单个 prop。

特性支持
Vue 3
Nuxt 3
Vue 2
TypeScript / Volar

WARNING

defineProp 不能与类型声明的 defineProps 在同一文件中使用。

Kevin 的版本

API 参考

ts
defineProp<T>(propName)
defineProp<T>(propName, options)

// propName 是参数可选的,
// 并且可从变量名中推断出
const propName = defineProp<T>()

基本用法

vue
<script setup>
// 声明 prop
const 
count
=
defineProp
('count')
// 从变量名中推断出 prop 名称 const
value
=
defineProp
()
// 访问 prop 值
console
.
log
(
count
.
value
)
</script>

选项

vue
<script setup lang="ts">
// 使用选项声明 prop
const 
count
=
defineProp
('count', {
type
:
Number
,
required
: true,
default
: 0,
validator
: (
value
: number) =>
value
< 20,
}) </script>

TypeScript

vue
<script setup lang="ts">
// 使用类型为 number 的 prop 声明,并从变量名中推断 prop 的名称
const 
count
=
defineProp
<number>()
count
.
value
// 使用默认值为 true 的 TS 类型为 boolean 的 prop 声明 const
disabled
=
defineProp
<boolean>('disabled', {
default
: true })
disabled
.
value
</script>

响应性语法糖

ts
const foo = $defineProp<string>('foo')
//    ^? type: string | undefined
const bar = $(defineProp('bar', { default: 'bar' }))
//    ^? type: string

Johnson 的版本

API 参考

ts
// 从变量名中推断出 prop 名称
const propName = defineProp<T>()
const propName = defineProp<T>(defaultValue)
const propName = defineProp<T>(defaultValue, required)
const propName = defineProp<T>(defaultValue, required, rest)

基本用法

vue
<script setup>
// 声明带有默认值 `0` 的 prop `count`
const 
count
=
defineProp
(0)
// 声明必需的 prop `disabled` const
disabled
=
defineProp
(
undefined
, true)
// 访问 prop 值
console
.
log
(
count
.
value
,
disabled
.
value
)
</script>

选项

vue
<script setup lang="ts">
// 使用选项声明属性
const 
count
=
defineProp
(0, false, {
type
:
Number
,
validator
: (
value
: number) =>
value
< 20,
}) </script>

TypeScript

vue
<script setup lang="ts">
const 
count
=
defineProp
<number>()
count
.
value
// 使用默认值声明 TS 类型为 boolean 的属性 const
disabled
=
defineProp
<boolean>(true)
disabled
.
value
</script>

响应性语法糖

vue
<script setup lang="ts">
const foo = $defineProp<number>()
//    ^? type: number | undefined

const bar = $(defineProp(0, true))
//    ^? type: number
</script>

Volar 配置

jsonc
// tsconfig.json
{
  // ...
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/define-prop",
      // ...更多功能
    ],
    // "kevinEdition" | "johnsonEdition" | false
    "experimentalDefinePropProposal": "kevinEdition",
  },
}

贡献者

The avatar of contributor named as renovate[bot] renovate[bot]

页面历史