Skip to content

definePropsRefs NPM Version

稳定性: 稳定

defineProps 中将返回 refs 而不是 reactive 对象,可以在不丢失响应式的情况下解构 props。

toRefs(defineProps()) => definePropsRefs()

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

基本用法

vue
<script setup lang="ts">
// ✅ 解构不丢失响应式
const { 
foo
,
bar
} =
definePropsRefs
<{
foo
: string
bar
: number
}>()
console
.
log
(
foo
.
value
,
bar
.
value
)
</script>

默认值

vue
<script setup lang="ts">
import { 
withDefaults
} from 'unplugin-vue-macros/macros'
const {
foo
} =
withDefaults
(
definePropsRefs
<{
foo
?: string
}>(), {
foo
: 'test' },
)
console
.
log
(
foo
.
value
)
</script>

Volar 配置

tsconfig.json
jsonc
{
  "vueCompilerOptions": {
    "plugins": ["unplugin-vue-macros/volar"],
  },
}

贡献者

页面历史