Aplikasi Populer

🔥 Selamat datang di Aplikasi Populer — Jelajahi tren terbaru tentang singo-edan!

Panduan Lengkap tentang Slot Vue

Slot adalah salah satu fitur Vue yang paling kuat untuk membangun komponen yang fleksibel dan dapat digunakan kembali. Slot memungkinkan induk memutuskan apa yang akan dirender sementara anak mengontrol di mana dan bagaimana tampilannya. Baik Anda membungkus konten dalam kartu, membangun tata letak, atau menyesuaikan setiap baris daftar, slot adalah alat yang tepat. Panduan ini membahas dasar-dasar, teknik lanjutan, dan banyak skenario praktis yang akan Anda gunakan setiap hari.

Dasar-Dasar Slot Vue

Apa Itu Slot Vue?

Sebuah slot adalah tempat penampung di komponen anak yang diisi dengan konten yang diberikan dari induk. Anak mendefinisikan satu atau lebih outlet ; induk menyediakan kontennya. Ini menjaga struktur dan perilaku anak (misalnya gaya, logika) sambil memberikan kendali penuh kepada induk atas konten HTML yang sebenarnya.

Bayangkan sebuah tombol: anak mungkin menangani tipe, status dinonaktifkan, dan penanganan klik, tetapi label (mungkin beserta ikon) berasal dari induk. Slot adalah cara Anda melewatkan label (atau fragmen templat apa pun) ke dalam.

Slot Default untuk Slot Vue

Bentuk paling sederhana adalah satu slot tanpa nama— slot default. Apa pun yang Anda letakkan di antara tag pembuka dan penutup anak akan dimasukkan ke dalam slot tersebut.

Komponen anak ( ButtonSubmit ):


Penggunaan induk:



Konteng Fallback untuk Slot Vue

Anda dapat meletakkan konten di dalam di anak. Konten tersebut digunakan hanya jika induk tidak menyediakan apa pun untuk slot tersebut. Dengan kata lain, ini adalah default slot.


Jika induk menggunakan tanpa konten, "Submit" akan ditampilkan. Jika induk menggunakan Simpan, "Simpan" akan ditampilkan.

Pola Slot dan Props Templat

Menentukan default slot dengan nilai prop adalah pola desain komponen Vue yang umum untuk meningkatkan API komponen secara progresif. Ini memungkinkan penggunaan cepat dengan prop tetapi tetap fleksibel untuk kebutuhan yang lebih kompleks. Misalnya, Anda dapat mendefinisikan komponen tombol sederhana dengan prop label bersama dengan slot untuk label:


Ini persis apa yang dilakukan oleh pustaka UI populer seperti Nuxt UI dengan komponen mereka.

Slot Bernama

Ketika sebuah komponen membutuhkan beberapa area konten yang berbeda, gunakan slot bernama. Anak memberikan setiap sebuah name; induk menargetkannya dengan v-slot (atau singkatan # ) pada