What are Vue slots?
Why Interviewers Ask This
This question tests conceptual clarity. Interviewers want to hear a precise, confident definition before moving to more complex Vue.js topics. It also reveals how well you can explain technical ideas to non-experts.
Answer
Slots allow parent components to inject content into a child component's template — like "holes" in the child that the parent can fill. They make components more flexible and reusable. Default slot: Child template: <div class="card"><slot /></div>. Parent usage: <BaseCard><p>This content fills the slot</p></BaseCard>. Fallback content: <slot>Default content if nothing is provided</slot>. Named slots: Child: <div class="modal"> <slot name="header" /> <slot /> <slot name="footer" /> </div>. Parent: <BaseModal> <template #header><h2>Title</h2></template> <p>Body content</p> <template #footer><button>Close</button></template> </BaseModal>. #header is shorthand for v-slot:header. Scoped slots: child passes data back to the parent's slot content. Child: <slot :item="item" :index="i" />. Parent: <template #default="{ item, index }">{{ index }}: {{ item.name }}</template>. Scoped slots allow the parent to control how the child renders its data — powerful for data tables and list components. Dynamic slots: <template #[dynamicSlotName]>. $slots: access slots programmatically to check if content was provided: $slots.header.
Pro Tip
If you're unsure about a detail, say so honestly and explain your reasoning. Interviewers respect candidates who can think through uncertainty rather than bluffing.