vue.js - Vue slot özelliklerine Typescript ile nasıl tip atanır

Resimde görebileceğiniz gibi, bir tablo bileşeninde işlemek için slot özelliklerimde türleri ayarlamaya çalışıyorum

Ben de deniyorum

#body={item: UserItem}, ama bu sadece parametreyi yeniden adlandırır. #body={<UserItem>item} ve #body={item<UserItem>}, ama bu çalışmıyor

Cevap #1

Slot kapsamı bir nesnedir, bu yüzden nesnenin kendisini şu şekilde yazmanız gerekir

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

Ancak eğer Table bileşeni kendi bileşeninizse, generici defineProps ve defineSlots ile birlikte kullanarak, iletilen values prop'una dayanarak slot'taki item için türü otomatik olarak çıkarabilirsiniz.

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

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

Cevap #2

Bunu defineSlots ile yapabilirsiniz

örnek :

 // in yout template

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

// in your script

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

ve bununla birlikte msg'yi string türünde alacaksınız

İlgili makaleler