juniorVue.js
What is the purpose of Slots?
Updated May 4, 2026
Short answer
Slots are placeholders in a component where a parent can inject HTML or other components.
Deep explanation
Slots allow for component composition. Instead of passing massive strings or HTML via props, you define a <slot></slot> tag in the child. Content placed between the child component tags in the parent is 'distributed' to that slot.
Real-world example
Creating a layout wrapper or a flexible Modal that can contain any content.
Common mistakes
- Forgetting that slot content is compiled in the parent scope, not the child scope.
Follow-up questions
- What are named slots?