Blade Components dan Slots

Komponen Blade dan Slot

Fitur baru di Laravel 5.4 adalah komponen dan slot. Bayangkan Anda memiliki panel kecil. Jika kita beralih ke editor, inilah tampilannya. Namun, ini harus lebih dapat digunakan kembali. Anda tidak perlu mengingat sintaks ini setiap kali ingin merender panel. Jadi, Anda bisa mengekstraknya menjadi bagian terpisah, seperti panel, lalu membuatnya dan menempelkannya. Sekarang, jika kita kembali ke browser dan menyegarkan, kita mendapatkan hal yang sama persis. Namun sekarang, kita tidak perlu mengingat semua markup ini.

Melewatkan Data ke Bagian Terpisah

Selanjutnya, kita ingin ini lebih dapat dikonfigurasi. Kita ingin judul di sini. Tentu saja itu akan gagal, kan? Kita harus melewatkannya. Jadi sekarang kita bisa mengatakan di sini, judul adalah Halo Dunia. Dan di bawah sini, lakukan hal yang sama untuk Halo Dunia lagi. Sekarang jika kita kembali dan menyegarkan, ya, kita kembali ke posisi semula. Tapi hal yang sama untuk deskripsi. Dan yang mungkin Anda temukan adalah melewatkan semua ini sebagai array bisa menjadi sangat berantakan dengan cepat. Untuk hal sederhana, tidak masalah. Tapi ya, ketika Anda mengisi deskripsi yang lebih besar atau banyak nilai, itu bukan hal yang paling menyenangkan untuk dikerjakan.

Menggunakan Komponen dan Slot

Sebagai gantinya, kita bisa mengubah ini menjadi komponen. Sekarang, hal yang baik adalah karena kita telah mengekstrak bagian ini, kita sudah bisa merujuknya sebagai komponen seperti ini. Kita bisa menggunakan direktif komponen baru, dan kita akan memberikan jalur ke tampilan, sama seperti jika Anda memuat tampilan biasa. Oke, jika kita biarkan seperti itu, kembali dan segarkan, sekali lagi kita akan mendapatkan kesalahan, kan? Dan itu karena ini mengharapkan judul. Sekarang, jika kita bisa menggunakan default, tentu saja kita selalu bisa mengatakan judul atau judulDefault. Kembali, segarkan, dan sekarang berhasil. Atau tentu saja, di Laravel, Anda bisa menggunakan kata kunci yang lebih khusus yang diketahui Blade. Tapi mari kita asumsikan bahwa itu diperlukan. Bagaimana cara melewatkan judul ini? Kita bisa melakukannya melalui slot. Jadi kita bisa mengatakan slot untuk judul harus apa pun yang kita inginkan. Halo, dunia. Jadi kembali dan segarkan, dan sekarang berhasil. Selanjutnya, hal yang sama untuk deskripsi di sini. Jadi kita akan menampilkan.

Menggunakan Kembali Komponen dengan Data

Direktif komponen akan dimasukkan di sana. Oke, mari kita coba. Segarkan, dan begitulah. Kita mendapatkan hal yang sama. Jadi Anda bisa membayangkan menggunakan ini untuk semuanya, dari peringatan hingga panel hingga modal khusus dan segala sesuatu di antaranya. Dan faktanya, jika Anda pernah menggunakan komponen View dan views, Anda akan melihat beberapa terminologi serupa di sini, dan itu bukan kebetulan. Jadi sekarang jika kita mau, kita bisa membuat yang baru di sini. Siapkan kolom-6, dan saya akan membungkusnya. Dan kemudian kita bisa membuat yang kedua dengan data yang berbeda. Kembali, segarkan, dan sekarang berhasil. Berguna.

Komponen dalam File Tata Letak

Sekarang, catatan akhir, Anda mungkin bertanya-tanya, bagaimana ini bekerja dengan file tata letak? Jadi apakah kita masih memiliki extends, dan apakah kita masih memiliki yield dan sections? Jawabannya adalah, tentu saja, tidak satupun dari itu hilang. Dan faktanya, apa yang akan Anda temukan adalah, jika Anda mau, Anda bahkan bisa mengatur file tata letak dan tampilan Anda sebagai komponen, seperti ini. Mari kita masuk ke folder resources/views, dan mungkin kita akan memiliki blade. Dan ya, Anda masih benar-benar bisa menggunakan yield. Namun, kita juga bisa menempatkan slot default di sini. Sekarang, tampilan selamat datang Anda atau tampilan apa pun, Anda bisa mengatakan komponen, dan saya akan merujuk file tata letak saya di sini. Sekarang saya bisa memiliki konten default seperti yang Anda harapkan. Jadi mari kita kembali ke Chrome. Kita akan menyegarkan ini, lihat sumbernya, dan Anda bisa melihat bahwa konten kita dimasukkan di sana. Dan selanjutnya, kita akan memiliki hal yang persis sama. Jadi mungkin jika Anda memiliki judul di sini yang ingin Anda timpa, jadi judul atau situs web saya, oke, kembali, segarkan, kita mendapatkan judul, seperti yang Anda lihat di sana, tetapi kita bisa menimpanya di sini. Slot untuk judul harus.