Vue 3/Nuxt 3-Slots mit generischen Datentypen, die von Requisiten abgeleitet werden
Ich möchte eine Karussellkomponente in Nuxt v3 implementieren. Diese Komponente empfängt eine Liste von Elementen. Diese Komponente implementiert nur Logik, keinen Stil oder Struktur.
Das ist jetzt meine Komponente:
组件/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>
Die Logik des Karussells ist hier nicht wichtig.
In der übergeordneten Komponente kann ich die Komponente so verwenden:
<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>
Das funktioniert großartig. Ansonsten möchte ich tippen. title 和 description 的类型当然是any，因为在 carousel.vue 的 props 中，项目的类型是 unknown[].
Ich habe diesen Artikel gefunden, der zeigt, wie man eine generische Komponente erstellt, aber ich möchte das nicht, weil ich mich mit dem automatischen Importsystem von Nuxt herumschlagen muss.
Wie implementiert man eine Typinferenz aus einem bestimmten Element im carousel.vue-Attribut?
