defineProp

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

使用 defineProp 逐个声明单个 prop。

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

WARNING

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

Kevin 的版本

API 参考

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

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

基本用法

vue

<script setup lang="ts">
// 声明 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>

响应性语法糖

vue

<script setup lang="ts">
const foo
 = $defineProp
<string>('foo')

const bar
 = $
(defineProp
('bar', { default
: 'bar' }))
</script>

Johnson 的版本

API 参考

// 从变量名中推断出 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 lang="ts">
// 声明带有默认值 `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>()

const bar = $(defineProp(0, true))
</script>

Volar 配置

tsconfig.json

jsonc

{
  "vueCompilerOptions": {
    "plugins": ["vue-macros/volar"],
    "vueMacros": {
      "defineProp": {
        // "kevinEdition" | "johnsonEdition"
        "edition": "kevinEdition",
      },
    },
  },
}