Slot berskop Vue 3/Nuxt 3 dengan jenis data generik yang disimpulkan daripada prop
Saya mahu melaksanakan komponen karusel dalam Nuxt v3. Komponen ini menerima senarai item. Komponen ini hanya melaksanakan logik, bukan gaya atau struktur.
Sekarang ini komponen saya:
组件/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>
Logik karusel tidak penting di sini.
Dalam komponen induk saya boleh menggunakan komponen seperti ini:
<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>
Ini berfungsi dengan baik. Selain daripada itu apa yang saya mahu ialah menaip. title 和 description 的类型当然是any，因为在 carousel.vue 的 props 中，项目的类型是 unknown[].
Saya dapati artikel ini menunjukkan cara membuat komponen generik, tetapi saya tidak mahu ini kerana saya perlu mengacaukan sistem import automatik nuxt.
Bagaimana untuk melaksanakan jenis inferens daripada item tertentu dalam atribut carousel.vue?
