vue.js - كيفية تعيين الأنواع لخصائص الـ slot في vue باستخدام Typescript

أحاول تحديد الأنواع على خصائص الفتحة الخاصة بي للتعامل معها في مكون الجدول كما ترى في الصورة

لقد كنت أحاول أيضًا مع

#body={item: UserItem}، لكنه يقوم فقط بإعادة تسمية المعامل. #body={<UserItem>item} و #body={item<UserItem>}، لكنهما لا يعملان

الإجابة رقم 1

نطاق الفتحة هو كائن، لذلك تحتاج إلى كتابة الكائن نفسه مثل

<template #body="{ item }: { item: UserItem }" />

ولكن إذا كان مكون Table هو مكونك الخاص، يمكنك أيضًا استخدام generic بالاشتراك مع defineProps و defineSlots لاستنتاج نوع item في الفتحة الخاصة بك تلقائيًا بناءً على الخاصية values التي تم تمريرها.

<script setup lang="ts" generic="T">
const props = defineProps<{
  values: T[]
}>()

const slots = defineSlots<{
  body(props: { item: T }): void
}>()
</script>

الإجابة رقم 2

يمكنك فعل ذلك باستخدام defineSlots

مثال :

 // in yout template

 <slot name="body" :msg="msg"></slot>

// in your script

defineSlots<{
  body(props: { msg: string }): any
}>()

وبذلك سيكون لديك msg كنوع سلسلة