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 组件以使用 标记中的 generic 属性，并将其转换为使用基于类型的defineProps supaya ia mendapat generik dengan betul.

<script setup lang="ts" generic="T extends any">
withDefaults(
  defineProps<{ items: T[]; spotlight?: number }>(), {
  spotlight: 1,
});
</script>
<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>

Prop pada slot kini akan disimpulkan dengan betul berdasarkan jenis item.

Sebelum Mei 2023

• RFC #436

Dalam versi VSCode/Volar yang terdahulu, anda perlu mendayakan Bendera eksperimen. Ia perlu dalam pilihan vueCompilerOptions 下启用 tsconfig.json 的 experimentalRfc436.

// tsconfig.json
{
  // ...
  "vueCompilerOptions": {
    "experimentalRfc436": true
  }
}

Ini tidak lagi diperlukan kerana ia didayakan secara lalai dalam versi terkini Volar.