Cara Menggunakan Slot Bernama di Vue

Panduan Penggunaan Slot Bernama di Vue

Slot bernama memungkinkan Anda menentukan beberapa titik penyisipan konten dalam sebuah komponen, memberikan kontrol yang tepat di mana konten yang berbeda akan dirender.

<!-- Komponen Kartu dengan slot bernama --><template><div class="card"><div class="card-header"><slot name="header"><!-- Konten header default --><h3>Judul Default</h3></slot></div><div class="card-body"><slot><!-- Slot default (tanpa nama) --><p>Konten default di sini</p></slot></div><div class="card-actions"><slot name="actions"><!-- Aksi default --><button>Aksi Default</button></slot></div><div class="card-footer" v-if="$slots"><slot name="footer"></slot></div></div></template><script setup>// Logika komponen di sini</script>

Slot bernama menggunakan atribut name pada komponen anak dan sintaks #namaSlot atau v-slot:namaSlot pada komponen induk. Simbol # adalah singkatan untuk v-slot:. Gunakan $slotsot untuk memeriksa apakah slot memiliki konten. Slot bernama juga dapat mengirim data ke komponen induk menggunakan slot lingkup. Slot default tidak perlu nama dan dapat diakses dengan #default.

<!-- Menggunakan komponen Kartu dengan slot bernama --><template><div><!-- Contoh 1: Menggunakan semua slot bernama --><Kartu><template #header><h2>Header Kustom</h2><p>Subjudul di sini</p></template><template #default><p>Konten ini masuk ke slot utama</p><ul><li>Item 1</li><li>Item 2</li></ul></template><template #actions><button @click="handleSave">Simpan</button><button @click="handleCancel">Batal</button></template><template #footer><small>Terakhir diperbarui: {{ lastUpdated }}</small></template></Kartu><!-- Contoh 2: Menggunakan sintaks v-slot --><Kartu><template v-slot:header><h2>Kartu Lain</h2></template><p>Konten tanpa pembungkus template</p><template v-slot:actions><button>Tombol Aksi</button></template></Kartu><!-- Contoh 3: Slot bersyarat dengan data lingkup --><KartuPengguna><template #avatar="{ user }"><img :src="user" :alt="user" /></template><template #content="{ user }"><h3>{{ user }}</h3><p>{{ user }}</p></template></KartuPengguna></div></template><script setup>import Kartu from './Kartu' import KartuPengguna from './KartuPengguna' const lastUpdated = new Date().toLocaleDateString() const handleSave = () => { console('Menyimpan...') } const handleCancel = () => { console('Dibatalkan') } </script>

Catatan Praktik Terbaik

Slot bernama banyak digunakan untuk membuat tata letak yang fleksibel untuk kartu, modal, dan tabel data. Pola ini memungkinkan pengembang untuk menyesuaikan bagian tertentu sambil mempertahankan struktur dan gaya yang konsisten di seluruh aplikasi.