Slot berskop Vue 3/Nuxt 3 dengan jenis data generik yang disimpulkan daripada prop

Question

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?

Answer 1

Dikemas kini: Mei 2023

Bermula dari Vue 3.3, menyokong komponen universal secara rasmi.

Anda perlu menentukan parameter biasa. Ubah suai kaedah carousel.vue 组件以使用

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved