Subscribe on changes!

defineSlots<SlotInterface>() missing slotNames

avatar
Feb 28th 2024

Vue version

latest

Link to minimal reproduction

no link provided, same in every vue component.

Steps to reproduce

Try to get the name(s) of the (named) slots that are useable with an imported component.

there is no way in knowing the names of the slots that can be used. even if there is a slot-interface, the names of the slots are unknown, and so not really use full.

there must be a way to get the slotNames of the typed defineSlots().

What is expected?

const slots = defineSlots()

slots should at least have the names of the slots from the definedSlots SlotInterface.

What is actually happening?

slots are not known, slots are not accessible, defined slots from components are not useable as the names are not known to the user.

System Info

mac m3
vs code 
vue latest

Any additional comments?

assign the slotsNames to props or something like that.

avatar
Feb 29th 2024

@el-j can you provide more information

Seems to be working to me playground

import { defineSlots } from 'vue'

const slots = defineSlots<{ a: () => any }>()

slots.a()
//@ts-expect-error  
slots.aaa()

image

avatar
Mar 1st 2024

If I had to guess, OP wants a way to read the available slot names from a component definition at runtime or something like that?

Not sure though ...

avatar
Mar 1st 2024

Hi, yes so indeed it's not about define slots and use them in the component. Its about useing the component and know the possible slot names or generically put in/fill all possible slots. Sorry if i was not clear on that.

If i import a component i can get slmething like component.props but cannot get component.slots (or emits...(but that might be another issue)

I would love to import a component and consider the slots and their content from within the script section. I am writting in typescript sfc style.