The slot properties in Vue share data from children components (slots) to their parent, that's pretty clear to me.
However, sometimes a slot exposes a function within its slot properties. In example, VCombobox has a selection slot which exposes this:
{
parent: VueComponent,
item: object,
index: number,
select: function,
selected: boolean,
disabled: boolean
}
The select property is actually a function. To me, that kind of property does not make sense.
So, What are those functions trying to do? Why should I expose a function in a slot? (I tested to call it and it is expecting a parameter, an error is raised)
Well in this case it doesn't make sense to me either because the selection slot is rendering items which are already selected so sharing select function which receives native browser event (as click for example) and just make the item selected again does not make sense, but I believe there is an use case and reason for that...
But in general passing a function as a slot prop is very useful!
Let's say you are creating a "pagination" component. You component has a "prev" and "next" buttons. When clicked those buttons execute some function inside your component (the function maybe changes the page number, maybe send some event ....but this is irrelevant in this example). But you want give the user of your component the option to define how the "prev" and "next" buttons look like. So you create a slot. But at the same time you want to give a user of your slot a functionality which should be executed when "their" representation of the buttons is clicked - easiest way to do that is to pass the function into the scoped slot. User can replace the visuals but keep the original functionality...