Aplikasi Populer

akan disisipkan ke elemen komponen anak, menghasilkan output berikut:

Komponen Saya Ini adalah konten yang akan disisipkan ke dalam slot komponen anak.

Kode lengkapnya akan terlihat seperti ini:




Menentukan konten fallback untuk slot Vue

Konten fallback mengacu pada konten yang ditampilkan dalam slot jika tidak ada konten yang disediakan untuk slot tersebut. Di Vue, konten fallback slot ditentukan menggunakan konten default di dalam tag .

Contoh:



Dalam contoh di atas, komponen induk telah mendefinisikan konten fallback untuk setiap slot. Jika komponen anak tidak menyediakan konten untuk slot header atau footer, konten fallback akan ditampilkan.

Bekerja dengan beberapa slot dan slot bernama

Kadang-kadang Anda mungkin ingin memiliki beberapa slot dalam satu komponen. Untuk melakukannya, Anda dapat menggunakan slot bernama. Slot bernama memungkinkan Anda menentukan nama untuk suatu slot, lalu menggunakan nama tersebut di komponen induk untuk menunjukkan slot mana yang akan disisipi konten.

Berikut contoh komponen yang menggunakan beberapa slot bernama:


Dalam contoh ini, komponen anak memiliki tiga slot bernama: header, body, dan footer. Komponen induk kemudian dapat menggunakan nama-nama ini untuk menunjukkan slot mana yang akan disisipi konten, seperti ini:


Outputnya akan menampilkan ketiga bagian konten.

Menggunakan nama slot dinamis di Vue

Vue memungkinkan Anda melewatkan nilai dinamis sebagai nama slot. Ini berguna ketika Anda ingin secara dinamis memutuskan konten slot mana yang akan dirender berdasarkan suatu kondisi.

Untuk menerapkan nama slot dinamis di Vue, Anda dapat menggunakan sintaks kurung siku untuk mengikat nama slot ke nilai dinamis.

Contoh:



Hasilnya akan menampilkan "Ini konten header" jika properti data currentSlot diatur ke header. Jika diubah ke nilai lain seperti body atau footer, konten slot akan berubah sesuai.

Mari kita lihat contoh yang lebih kompleks. Misalkan Anda memiliki komponen reusable seperti kartu yang perlu menampilkan konten berbeda berdasarkan konteks. Anda dapat menggunakan nama slot dinamis sebagai pengganti slot default:


Sekarang, ketika menggunakan komponen Card, Anda dapat menetapkan nama slot secara dinamis berdasarkan jenis kartu:



Menggunakan scoped slot di Vue

Scoped slot menyediakan cara untuk melewatkan data dari komponen anak ke komponen induk. Daripada melewatkan konten ke komponen anak, scoped slot memungkinkan komponen anak melewatkan data kembali ke komponen induk, yang kemudian dapat menggunakan data tersebut untuk merender konten di slot.

Berikut contoh komponen anak yang menggunakan scoped slot:


Komponen induk kemudian dapat menggunakan data yang dilewatkan oleh komponen anak untuk merender konten di slot:



Mencapai reusableitas dalam aplikasi Vue dengan slot

Salah satu manfaat utama menggunakan slot adalah memungkinkan Anda membuat komponen yang sangat reusable. Dengan menggunakan slot, komponen induk dapat mengontrol tata letak dan konten komponen anak. Ini memudahkan penggunaan ulang komponen anak di berbagai tempat tanpa harus mengubah kodenya.

Anda juga dapat menggunakan slot di Vue bersama dengan fungsi untuk membuat kode yang lebih fleksibel dan reusable. Dalam konteks ini, kita dapat menganggap slot sebagai tempat penampung untuk fungsi, di mana komponen induk menyediakan fungsi yang akan dieksekusi di komponen anak.

Di komponen anak, kita dapat mendefinisikan slot yang mengharapkan fungsi dilewatkan sebagai prop. Kemudian kita dapat menggunakan slot fungsi ini untuk mengeksekusi fungsi yang disediakan di dalam komponen anak.

Contoh:


Di komponen induk, kita dapat menggunakan direktif v-slot untuk melewatkan fungsi ke slot fungsi komponen anak:



Menggunakan slot dalam komponen tanpa render

Komponen tanpa render (renderless components) adalah teknik yang kuat di Vue yang dapat membantu kita membuat logika reusable tanpa overhead membuat komponen UI yang lengkap. Komponen tanpa render pada dasarnya adalah komponen yang tidak merender markup HTML sendiri, tetapi menyediakan fungsionalitas yang dapat digunakan oleh komponen lain. Dengan menggunakan slot, komponen tanpa render dapat melewatkan data dan fungsionalitas ke komponen lain, yang kemudian dapat menggunakan data tersebut untuk merender konten.

Berikut contoh komponen tanpa render yang menyediakan slot untuk komponen induk merender daftar item:


Contoh komponen induk yang menggunakan komponen tanpa render untuk merender daftar item:



Kesimpulan

Dalam tutorial ini, kami membahas dasar-dasar slot Vue dan bagaimana kita dapat menggunakannya untuk membuat komponen yang reusable dan fleksibel. Kami juga membahas cara menggunakan beberapa slot dan slot bernama, scoped slot, serta slot dalam komponen tanpa render. Dengan memahami kekuatan slot, Anda dapat membawa pengembangan Vue Anda ke level berikutnya dan membuat komponen yang sangat reusable dan fleksibel.