Slots là gì? Named slots và scoped slots?

Slots cho phép parent inject content vào template của child component.

• Default slot: <slot />.
• Named slots: <slot name="header" /> — parent dùng <template #header>.
• Scoped slot: child truyền data lên parent qua slot:

<!-- Child -->
<slot :item="item" :index="i" />

<!-- Parent -->
<template #default="{ item, index }">
  <span>{{ index }}: {{ item.name }}</span>
</template>

Dùng scoped slots khi child biết cách lấy data nhưng parent quyết định cách render (render prop pattern).

Pitfall: không mix slot và v-if trên cùng <template> — tách riêng.