Vue.js Slots

Slots allow you to pass content from a parent component into a child component’s template. They make components flexible and reusable.

Default Slot Example

A default slot allows parent content to be injected into a child component where <slot> is declared.

Named Slots Example

Named slots let you define multiple regions inside a component.

Scoped Slots Example

Scoped slots allow a child component to expose data to the parent’s slot content.

Summary

• Default slot → simple content injection
• Named slots → multiple regions like header/footer
• Scoped slots → pass data from child → parent