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

← All Vue.js Developer questions