Directive v-slot
Denote named slots or scoped slots that expect
to receive props.
Shorthand: #
Limited to:
components (for a lone default slot with props)
<!-- Named slots -->
<BaseLayout>
<template v-slot:header>
Header content
</template>
<template v-slot:default>
Default slot content
</template>
<template v-slot:footer>
Footer content
</template>
</BaseLayout>
<!-- Named slot that receives props -->
<InfiniteScroll>
<template v-slot:item="slotProps">
<div class="item">
{{ slotProps.item.text }}
</div>
</template>
</InfiniteScroll>
<!-- Default slot that receive props, with destructuring -->
<Mouse v-slot="{ x, y }">
Mouse position: {{ x }}, {{ y }}
</Mouse>