Slot
ELI5 — The Vibe Check
A slot is a placeholder in a component where a parent can inject its own custom content. Imagine a card component with a slot — one time you put a chart in it, another time a table. The card doesn't care what goes in the slot, it just renders it.
Real Talk
Slots are a content distribution mechanism that allow parent components to inject template content into specific locations in a child component. Vue has named slots for multiple injection points and scoped slots that expose child data to the parent's slot content.
Show Me The Code
<!-- Card.vue -->
<template>
<div class="card">
<slot name="header" />
<div class="body">
<slot />
</div>
</div>
</template>
<!-- Usage -->
<Card>
<template #header><h2>Title</h2></template>
<p>Card body content here.</p>
</Card>
When You'll Hear This
"Use a named slot for the modal's footer so consumers can put their own buttons there." / "Scoped slots let the child expose data back up to the parent's slot content."
Related Terms
Component
A component is a self-contained LEGO brick for your UI.
Props
Props are how you pass information INTO a component, like giving a coffee machine its settings.
Template
A template is the HTML part of your component — the blueprint for what it looks like. In Vue you write it inside a <template> tag. In React you return JSX.
Vue
Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.