Slots

Slot

Baiklah, saatnya untuk yang utama: slot. Ini adalah fitur yang telah saya tunda selama bertahun-tahun. Saya tahu bahwa kami membutuhkannya di Livewire, kami memilikinya di komponen Blade. Mereka sangat berguna. Saya pernah membutuhkannya di masa lalu dan kami tidak memilikinya. Alasannya adalah karena komponen Livewire jauh lebih rumit daripada komponen Blade. Ia memiliki siklus hidup sendiri dari komunikasi klien-server di mana slot tidak semudah yang Anda bayangkan. Namun kami tahu bahwa ini adalah taruhan dasar untuk V4, jadi kami duduk dan memecahkannya dan saya sangat bersemangat tentang hal itu.

Demo Slot Dasar

Jadi biarkan saya menunjukkan kepada Anda penggunaan slot paling dasar di Livewire. Sekarang Anda memiliki komponen anak ini, komponen anak bersarang kartu. Anda dapat memasukkan sesuatu ke dalamnya sekarang, sama seperti komponen Blade. Jadi <div>halo dunia</div>. Lalu tutup tag Anda, dan di suatu tempat di dalam komponen bersarang itu, Anda menampilkan slot. Tidak berbeda dengan komponen Blade. Lihat halaman: semuanya bertuliskan "halo dunia". Jadi hanya itu yang perlu Anda ketahui untuk penggunaan dasar. Kita bisa berhenti di situ. Kami memiliki slot. Demo hanya memakan waktu dua detik, tetapi ketika saya membuat dan mendemonstrasikannya, saya kesulitan menemukan kasus penggunaan yang baik untuk slot selain hal-hal sederhana. Kapan slot benar-benar kuat? Kapan Anda benar-benar membutuhkannya di dunia nyata? Dan sejujurnya tidak ada pilihan lain. Saya pikir saya menemukan yang sangat bagus. Kami akan membangunnya sepenuhnya di sini sehingga Anda bisa merasakan kebutuhan akan slot, lalu kami akan menerapkannya.

Membangun Seleksi Massal

Oke, halaman ini: yang ingin saya perkenalkan adalah kotak centang kecil agar saya dapat melakukan seleksi massal dan kemudian tindakan massal di atas, seperti hapus. Saya bisa memilih lima di antaranya lalu tekan hapus dan semuanya akan terhapus. Mari kita bangun itu dulu. Dalam data, saya ingin sesuatu seperti public $selected = []. Ini ada di komponen induk, dan akan diisi dengan semua ID posting yang dipilih. Lalu di bawah, kita ingin metode deleteSelected. Mari kita buat: Post::whereIn('id', $this->selected)->delete(); $this->selected = [];. Sederhana.

Sekarang kita perlu antarmuka. Pertama, kotak centang. Saya akan menambahkan <flux:checkbox wire:model="selected" value="$post->id" />. Dengan wire:model, setiap kali Anda mengklik kotak centang, komponen akan disegarkan. Lalu kita tampilkan tindakan massal jika ada yang dipilih: @if(count($selected)) ... @endif. Sekarang saat saya mengklik, satu dipilih, dua dipilih, tiga dipilih, dan jika saya hapus, semuanya hilang.

Menggunakan Slot untuk Menyarangkan

Oke, tidak ada yang spesifik dengan slot di sini. Inilah saat slot menjadi sangat kuat. Saya ingin kotak centang ini berada di dalam kartu. Namun, saya ingin semua fungsionalitas terkait kotak centang berada di komponen induk utama. Di sinilah saat menyarangkan komponen di Livewire, Anda menemui sedikit hambatan: misalnya, Anda menempatkan kotak centang di anak dan mengirim event yang mengatakan "Saya sekarang dipilih", atau ada hal yang lebih dalam seperti modelable. Terlalu rumit. Slot sempurna untuk ini. Jadi, kita bisa mengambil kotak centang dan meletakkannya di dalam slot, bukan di atas. Hapus <div> pembungkus. Sekarang kotak centang ditampilkan di dalam komponen, tapi kita menampilkan slot di atas. Mari kita letakkan slot di bawah. Sekarang kotak centang muncul di sisi kanan kartu. Uji: hapus dan dua itu hilang. Keren.

Ini slot default. Saya lebih suka menggunakan slot bernama karena tempat yang sangat spesifik. Jadi buat slot bernama checkbox: <livewire:slot name="checkbox"> dan di dalamnya taruh kotak centang. Kemudian di komponen anak, akses slot: {{ $slots['checkbox'] }}. Atau {{ $slots->get('checkbox') }}. Ada metode tambahan seperti $slots->has('checkbox'). Jadi kita bisa hanya render <div> jika ada slot bernama checkbox. Itu terasa sangat baik.

Perilaku Slot yang Terikat ke Induk

Kekuatan sebenarnya adalah kotak centang ini dirender di dalam komponen anak, tetapi wire:model mengarah ke komponen induk. Jika saya membangun slot di Livewire, saya langsung menemui masalah: wire:model di dalam anak secara otomatis mencari properti di anak. Kami pintar: pastikan bahwa saat Anda berada di dalam slot, Anda dapat menggunakan PHP induk. Anda bisa {{ $post->id }}, dan itu berfungsi. Demikian pula, wire:model, wire:click, dll. akan mengarah ke komponen induk karena di sanalah slot berada. Itulah mengapa slot kuat: Anda dapat mengambil sesuatu dari induk dan memindahkannya ke anak, tetapi sebenarnya tetap menjadi milik induk. Saya sangat bersemangat. Ini sangat performant: setelah hapus, kami tidak menyegarkan komponen anak mana pun. Tidak ada permintaan ke server. Induk memiliki tentakel kecil di dalam anak-anak itu. Itulah slot.