Sometimes, it’s useful for slot content to have access to data only available in the child component. For example, imagine a <current-user> component with the following template:
<span>
<slot>{{ user.lastName }}</slot>
</span>
We might want to replace this fallback content to display the user’s first name, instead of last, like this:
<current-user>
{{ user.firstName }}
</current-user>
That won’t work, however, because only the <current-user> component has access to the user and the content we’re providing is rendered in the parent.
To make user available to the slot content in the parent, we can bind user as an attribute to the <slot> element:
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
Attributes bound to a <slot> element are called slot props. Now, in the parent scope, we can use v-slot with a value to define a name for the slot props we’ve been provided:
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
In this example, we’ve chosen to name the object containing all our slot props slotProps, but you can use any name you like.
