Vue 3 TS 需要 aria-label

Question

我想构建一个组件，需要将 aria-label 作为属性提供。

<MyComponent
  :aria-label="condition ? 'close' : 'open'"
/>

// MyComponent.vue

defineProps<{
  ariaLabel: string
}>

但这导致

Property 'arialabel' is missing in type '{ 'aria-label': string; }' but required in type

正在努力

<MyComponent
  :ariaLabel="condtion ? 'close' : 'open'"
/>

显然没有意义。我注意到更改第一个词“aria”有效。例如

:ariat-label

有效但更改第二个词不起作用所以我想知道

aria

是否只是一个保留字。这很好，但我如何在

MyComponent

中要求它？

Answer 1

如果你多注意语法，可能会奏效。

defineProps

是 函数。需要调用它来做任何事情。

defineProps<{
  ariaLabel: string
}>()     /*
  👆 this bit is essential
         */

看到它工作.