Mengenal Slot dalam VueJS

   March 17, 2025       Mahatma Mahardhika

---

Mengenal Slot dalam VueJS

Daftar Isi

• Pengantar
• Jenis Slot dalam VueJS
• Contoh Penggunaan
• Kesimpulan

Pengantar

Slot dalam VueJS adalah mekanisme powerful yang memungkinkan kita menyusun ulang komponen dengan lebih fleksibel. Dengan slot, kita dapat menyisipkan konten ke dalam komponen dari luar, tanpa perlu mendefinisikan isi secara statis di dalamnya.

Jenis Slot dalam VueJS

Ada beberapa jenis slot dalam VueJS, antara lain:

1. Slot Biasa

Slot biasa digunakan untuk menampilkan konten default dalam sebuah komponen.

2. Named Slot

Named slot memungkinkan kita untuk menentukan slot dengan nama tertentu agar bisa digunakan lebih fleksibel.

3. Scoped Slot

Scoped slot memungkinkan kita untuk mengirimkan data dari komponen induk ke dalam slot yang berada dalam komponen anak.

Contoh Penggunaan

Berikut adalah contoh penggunaan masing-masing jenis slot dalam VueJS:

1. Slot Biasa

// Komponen Child.vue
<template>
  <div>
    <slot>Ini adalah konten default jika tidak ada slot yang diberikan.</slot>
  </div>
</template>

// Penggunaan dalam Parent.vue
<Child>
  <p>Konten ini akan menggantikan slot default.</p>
</Child>

2. Named Slot

// Komponen Child.vue
<template>
  <div>
    <header>
      <slot name="header">Default Header</slot>
    </header>
    <main>
      <slot>Default Content</slot>
    </main>
  </div>
</template>

// Penggunaan dalam Parent.vue
<Child>
  <template v-slot:header>
    <h1>Header Kustom</h1>
  </template>
  <p>Konten utama yang akan menggantikan default content.</p>
</Child>

3. Scoped Slot

// Komponen Child.vue
<template>
  <div>
    <slot :message="'Hello from Child'"></slot>
  </div>
</template>

// Penggunaan dalam Parent.vue
<Child v-slot="slotProps">
  <p>Pesan dari child: {{ slotProps.message }}</p>
</Child>

Kesimpulan

Slot dalam VueJS adalah fitur yang sangat berguna untuk membuat komponen lebih fleksibel dan dapat digunakan kembali dengan berbagai cara. Dengan memahami slot biasa, named slot, dan scoped slot, kita bisa membangun antarmuka yang lebih dinamis dan modular.