Emplacements de portée Vue 3/Nuxt 3 avec des types de données génériques déduits des accessoires
Je souhaite implémenter un composant carrousel dans Nuxt v3. Ce composant reçoit une liste d'éléments. Ce composant implémente uniquement la logique, pas le style ou la structure.
Maintenant, voici mon composant :
组件/tdx/carousel.vue
<template>
<div>
<slot name="last"></slot>
<div v-for="item in items">
<slot
name="item"
v-bind="item"
></slot>
</div>
<slot name="next"></slot>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
items: {
type: [],
required: true,
},
spotlight: {
type: Number,
default: 1,
validator(value: number) {
return value > 0;
},
},
});
</script>
La logique du carrousel n'est pas importante ici.
Dans le composant parent, je peux utiliser le composant comme ceci :
<template>
<div class="container">
<TdxCarousel :items="exampleArray">
<template #item="{ title, description }">
<p class="font-semibold text-2xl">{{ title }}</p>
<hr />
<p>{{ description }}</p>
</template>
</TdxCarousel>
</div>
</template>
<script setup lang="ts">
const exampleArray = ref([
{
title: 'Item 1',
description: 'Desc of item 1',
},
{
title: 'Item 2',
description: 'Desc of item 2',
},
]);
</script>
Cela fonctionne très bien. A part ça, ce que je veux, c'est taper. title 和 description 的类型当然是any，因为在 carousel.vue 的 props 中，项目的类型是 unknown[].
J'ai trouvé cet article montrant comment créer un composant générique, mais je ne veux pas de cela car je dois jouer avec le système d'importation automatique de nuxt.
Comment implémenter l'inférence de type à partir d'un élément donné dans l'attribut carousel.vue ?
