🧳 Slots di Vue.js

Slots di Vue.js memungkinkan parent component menyisipkan konten HTML ke dalam komponen anak. Ini sangat berguna untuk membuat komponen reusable dan fleksibel seperti layout, card, modal, dan lainnya.

---

🧩 1. Slot Dasar (Default Slot)

Komponen Anak: BaseCard.vue

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

Komponen Parent

<BaseCard>
  <h3>Judul</h3>
  <p>Konten diisi dari parent</p>
</BaseCard>

---

🧠 <slot></slot> akan digantikan oleh konten yang dikirim dari parent.

🎯 2. Named Slot

Kamu bisa membuat lebih dari satu slot dengan nama tertentu.

Komponen Anak

<template>
  <header><slot name="header" /></header>
  <main><slot /></main>
  <footer><slot name="footer" /></footer>
</template>

Komponen Parent

<BaseLayout>
  <template #header>
    <h1>Judul Halaman</h1>
  </template>

  <p>Isi konten utama</p>

  <template #footer>
    <small>Copyright 2025</small>
  </template>
</BaseLayout>

#header adalah shorthand dari v-slot:header.

---

💡 3. Default + Named Slot

Jika tidak diberi name, maka dianggap slot default:

<slot /> <!-- default -->
<slot name="sidebar" /> <!-- named -->

---

🔄 4. Slot Scope (Scoped Slot)

Slot scoped memungkinkan child mengirim data ke parent melalui slot.

Komponen Anak

<template>
  <slot :user="user" />
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'Andi', role: 'admin' }
    }
  }
}
</script>

Komponen Parent

<UserCard v-slot="{ user }">
  <p>{{ user.name }} - {{ user.role }}</p>
</UserCard>

---

🧠 5. Best Practices

• Gunakan default slot untuk konten utama

• Gunakan named slot jika butuh posisi berbeda (header, sidebar, footer)

• Gunakan scoped slot untuk membuat komponen lebih dinamis & fleksibel

• Slot lebih cocok daripada prop untuk menyisipkan template HTML

📌 Kesimpulan

• Slot: Tempat menyisipkan konten dari parent ke child

• Named Slot: Bisa menempatkan konten di posisi berbeda

• Scoped Slot: Bisa mengakses data dari komponen anak

• Membuat komponen fleksibel dan reusable