Vue.js Developer interview question · Most asked
Explain default, named and scoped slots.
Summary
Slots let a parent pass template content into a child. The default slot receives untargeted content; named slots (<template #header>) target specific outlets; scoped slots let the child pass data back to the slot content (<slot :item="item"> used as <template #row="{ item }">).
Longer Answer
Scoped slots power flexible, reusable components: a data table renders rows but lets the parent decide how each cell looks; a list component handles fetching and pagination and exposes items through the slot. Renderless components take this to the extreme (all logic, no markup), although composables now cover most of those use cases. $slots / useSlots() let a component check whether a slot was provided.
Key Points
- Default, named (#name), scoped (slot props).
- Child passes data to slot content.
- Enables flexible, reusable components.
- Composables often replace renderless components.
More most-asked Vue.js Developer questions
- Options API or Composition API: what is the difference, and which would you use?
- How do props work, and what is one-way data flow?
- How does Vue 3's reactivity system work, and how does it differ from Vue 2's?
- computed, watch or watchEffect: when do you use each?
- ref or reactive: what is the difference, and when do you use each?
- How do you use Vue Router: dynamic routes, nested routes and navigation guards?
- Why does v-for need a key, and why should it not be the index?
- What are composables, and why did they replace mixins?