suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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?

P粉863295057P粉863295057412 Tage vor749

Antworte allen(1)Ich werde antworten

  • P粉476547076

    P粉4765470762023-11-03 18:29:13

    更新：2023 年 5 月

    从 Vue 3.3 开始，正式支持通用组件.

    您需要定义一个通用参数。修改 carousel.vue 组件以使用