<slot> Slot Outlet
Last updated: 2026-10-22
<slot> Slot Outlet
| Group | Built-ins |
|---|---|
| Kind | Component / Element |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<slot></slot>
<slot name="header">Default header</slot>
<!-- scoped slot: pass child data out -->
<slot :item="item"></slot>⚙️ Arguments
| props | name (named slot, default is 'default'); extra attributes expose scope data |
|---|
▶ Example
Edit the code below and see the live result:
Output：
Shows the parent's custom header and body content.💡 Key Points
💡 Tip Fallback content appears only when the parent passes nothing.
ℹ️ Note Scoped slots hand child data back to the parent.
⚠️ Warning Slot content compiles in the parent scope — child data needs scoped slots.
🏷️ Related Built-ins
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What if the parent passes nothing?
A Fallback content shows; otherwise nothing renders.
Q How many slots per component?
A Any number — one default plus named ones.
Q Can slot content read child data?
A Not directly — export it through scoped slot props.
