Slot Vuejs
> Sebelum mulai membaca halaman ini, kami berasumsi bahwa Anda telah membaca Dasar-Dasar Komponen. Baca halaman itu terlebih dahulu bila Anda belum mengerti tentang komponen.
> Di versi 2.6.0, kami memperkenalkan sintaks baru (direktif v-slot) untuk nama dan slot scope. Sintaks tersebut menggantikan slot dan atribut slot-scope, yang sekarang tidak digunakan lagi, tapi masih belum dihapus dan masih didokumentasikan di sini. Alasan kami untuk memperkenalkan sintaks baru dapat dilihat di RFC.
Konten Slot
Vue mengimplementasikan API distribusi konten yang terinspirasi dari Draf Spesifikasi Komponen Web, dan elemen dapat digunakan sebagai outlet distribusi untuk konten kita.
Ini memungkinkan Anda untuk membuat komponen seperti ini:
navigation-link>
Kemudian di templat , Anda mungkin memiliki templat seperti ini:
Ketika komponen di-render, akan menggantinya dengan “Profil Anda”. Elemen slot dapat berisi kode templat apa saja, termasuk HTML:
Profil Anda
navigation-link>
Atau bahkan dapat berisi komponen lain:
Profil Anda
navigation-link>
Jika templat tidak berisi elemen , konten apapun yang kita sediakan di dalam komponen akan di buang.
Kompilasi Scope
Saat Anda ingin menggunakan data di dalam slot, seperti ini:
navigation-link>
Slot dapat mengakses properti instance yang sama (scope yang sama). Slot tidak dapat mengakses ke scope . Misalnya, Anda mencoba untuk mengakses data url dari scope , itu tidak akan bisa:
navigation-link>
Ingat, bahwa aturannya:
> Semua yang ada di templat induk, akan dikompilasi di dalam scope induk; semua yang ada di templat anak, akan dikompilasi di dalam scope anak.
Konten Fallback
Ada beberapa kasus yang bermanfaat untuk menentukan konten slot fallback (slot default), yang hanya akan di-render ketika tidak ada konten yang tersedia. Misalnya, di dalam komponen :
Kita mungkin ingin merender teks “Submit” di dalam setiap saat. Untuk membuatnya, kita dapat menempatkan teks “Submit” di antara tag :
Sekarang saat kita menggunakan di dalam komponen induk, yang tidak kita sediakan konten di dalamnya:
Komponen tersebut akan merender konten fallback (default) yang telah kita sediakan sebelumnya:
Akan tetapi jika kita menyediakan konten di komponen tersebut:
Save
submit-button>
Konten tersebut akan di-render sebagai:
Slot yang Memiliki Nama (Named Slot)
> Diperbarui di versi 2.6.0+. Lihat di sini untuk sintaks yang tidak digunakan lagi, yang menggunakan atribut slot.
Ada kalanya memiliki banyak slot itu bermanfaat. Misalnya, di dalam komponen dengan templat berikut ini:
main>