iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Laravel Volt adalah API fungsional untuk Livewire yang memungkinkan logika PHP dan template Blade sebuah komponen ditulis dalam satu file. Volt mengompilasi kode tersebut menjadi komponen Livewire berbasis kelas, sehingga komponen tetap menggunakan kemampuan Livewire tanpa Anda harus menulis kelas bernama tersendiri. [Dokumentasi Volt 3.x]
Bagaimana Laravel Volt bekerja?
Dalam pola fungsional, file berakhiran .blade.php memuat bagian PHP untuk mendefinisikan perilaku komponen dan bagian Blade untuk tampilannya. Volt menghubungkan keduanya dan mengompilasi API fungsional itu menjadi komponen Livewire. Di Blade, nama aksi dapat dipanggil menggunakan sintaks Livewire seperti wire:click; closure aksi yang terikat ke komponen dapat mengakses komponen melalui $this.
Contoh sederhana berikut menunjukkan alurnya: state menyimpan nilai, closure bernama mengubahnya, dan Blade menampilkan nilai serta menghubungkan tombol dengan aksi.
Recommended Free Tools
<?php
use function LivewireVolt{state};
state(['count' => 0]);
$increment = fn () => $this->count++;
?>
<div>
<button wire:click="increment">+</button>
<span>{{ $count }}</span>
</div>Ini menggambarkan pola, bukan pengganti pemeriksaan versi atau dependensi proyek. Volt juga mendukung komponen berbasis kelas anonim yang memperluas LivewireVoltComponent, dengan template Blade tetap berada dalam file yang sama. Dokumentasi Volt menyajikan pendekatan fungsional dan berbasis kelas sebagai dua pilihan, bukan menyatakan salah satunya selalu lebih baik.
#1 Best Overall
Apa bedanya Volt dengan komponen Livewire biasa?
Perbedaan utamanya adalah cara mengorganisasi kode. Komponen Livewire konvensional biasanya memisahkan kelas PHP dan tampilan Blade; Volt memungkinkan logika dan tampilan berada dalam satu file. Dalam Volt, Anda dapat memilih API fungsional atau kelas anonim. Kode yang dihasilkan tetap mengikuti model komponen Livewire, jadi Volt bukan sistem UI yang terpisah.
| Pendekatan | Letak logika dan tampilan | Gaya penulisan | Catatan versi |
|---|---|---|---|
| Komponen Livewire konvensional | Kelas PHP dan tampilan Blade umumnya terpisah. | Kelas komponen. | Periksa dokumentasi untuk versi Livewire proyek. |
| Volt pada Livewire 3.x | Logika dan template Blade dalam satu file .blade.php. |
API fungsional atau kelas anonim. | Panduan Volt yang menjelaskan instalasi dan API tersedia untuk Livewire 3.x. [Dokumentasi Volt 3.x] |
| Komponen satu-file bawaan Livewire 4.x | Logika dan template Blade dapat berada dalam satu file. | Sintaks satu-file bawaan; panduan peningkatan menjelaskan kesesuaiannya dengan pola kelas Volt. | Livewire 4.x memiliki komponen satu-file bawaan dan panduan migrasi dari Volt. [Panduan peningkatan Livewire 4.x] |
Bagaimana memasang dan membuat komponen Volt?
Langkah berikut mengikuti dokumentasi Volt untuk Livewire 3.x. Jangan menganggap langkah ini sebagai persyaratan bagi semua proyek Livewire 4.x; periksa panduan versi yang digunakan aplikasi.
- Pasang Volt melalui Composer:
composer require livewire/volt. - Jalankan
php artisan volt:installuntuk memasang service provider Volt. - Tempatkan komponen satu-file di direktori yang dipindai provider. Direktori bawaan yang disebut dokumentasi adalah
resources/views/livewiredanresources/views/pages; provider dapat disesuaikan untuk lokasi lain. - Buat komponen, misalnya dengan
php artisan make:volt counter. File komponen menggunakan ekstensi.blade.php.
Generator juga mendokumentasikan opsi --test, --pest, dan --class. Ketersediaan dan perilakunya perlu dicocokkan dengan versi paket di proyek. [Dokumentasi Volt 3.x]
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallKonsep Volt yang perlu dipahami saat menulis komponen
State dan parameter komponen
Fungsi state() mendefinisikan properti yang dapat digunakan komponen dan template. Hook mount() dapat menerima parameter komponen; dokumentasi Volt menyebut parameter tambahan yang dibutuhkan hook dapat diselesaikan melalui service container Laravel. [Dokumentasi Volt 3.x]
Rank #3
Nilai awal yang membutuhkan data atau layanan
Jika nilai awal bergantung pada kueri basis data, model, atau layanan, dokumentasi menyarankan membungkusnya dalam closure agar resolusinya ditunda sampai diperlukan. Arahan serupa berlaku untuk model yang diterima melalui route model binding Folio. Ini membantu menghindari pekerjaan yang dilakukan terlalu dini saat komponen didefinisikan. [Dokumentasi Volt 3.x]
Kontrol properti dan aliran data
locked()ditujukan untuk mencegah perubahan properti tertentu dari sisi klien.reactive()mengatur pembaruan properti dari parent ke child.modelable()mendukung state yang dibagikan melaluiwire:model.
Fungsi-fungsi tersebut mengatur perilaku tertentu; keberadaan state biasa saja bukan jaminan perlindungan menyeluruh. Ikuti dokumentasi properti Livewire untuk memahami batas dan penggunaan yang sesuai dengan versi aplikasi. [Properti Livewire 4.x]
Computed properties dan penyimpanan hasil
Gunakan computed() untuk nilai turunan atau nilai yang ingin diambil secara malas, alih-alih menyimpan salinan yang dapat menjadi tidak sinkron. Volt menyatakan hasil computed dimemoisasi selama siklus hidup request Livewire. Dengan persist(), hasil dapat disimpan ke cache aplikasi; durasinya dapat diberikan dalam detik. Dokumentasi Livewire 4.x juga menjelaskan computed properties sebagai nilai turunan yang dimemoisasi untuk akses berikutnya selama request. [Dokumentasi Volt 3.x] [Computed properties Livewire 4.x]
Free tools Windows power users keep installed
One-click scans. No signup required.
Aksi dan fitur Livewire
Closure bernama dapat menjadi aksi komponen yang dipanggil dari template. Dokumentasi Volt juga mencakup route halaman penuh, layout dan judul, listener, validasi, unggah berkas, query URL, pagination, serta pengujian. Fitur-fitur tersebut adalah bagian dari cara menulis komponen Livewire, bukan tanda bahwa Volt menyediakan sistem antarmuka terpisah. [Dokumentasi Volt 3.x]
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Apakah Volt masih relevan di Livewire 4?
Volt tetap penting untuk memahami pola fungsional dan untuk proyek yang sudah menggunakannya. Namun, Livewire 4.x kini mendukung komponen satu-file bawaan dengan sintaks yang sama seperti komponen Volt berbasis kelas. Panduan peningkatan resmi menjelaskan migrasi, termasuk perubahan dari LivewireVoltComponent ke LivewireComponent, dari Volt::route() ke Route::livewire(), serta dari Volt::test() ke Livewire::test(). Panduan itu juga menyebut penghapusan provider Volt dan paket livewire/volt setelah migrasi. Komponen Volt berbasis kelas disebut dapat bekerja tanpa perubahan setelah peningkatan ke Livewire 4.x. [Panduan peningkatan Livewire 4.x]
Karena pilihan bergantung pada versi, dependensi, dan bentuk komponen yang sudah ada, jangan menghapus paket atau provider hanya karena aplikasi menggunakan Livewire 4.x. Ikuti panduan peningkatan untuk proyek tersebut dan evaluasi apakah migrasi sesuai kebutuhan tim.
Bagaimana menguji komponen Volt?
Untuk contoh Volt 3.x, dokumentasi menunjukkan penggunaan Volt::test('counter') bersama assertion API pengujian Livewire untuk memeriksa hasil render dan aksi. Pada Livewire 4.x, dokumentasi pengujian merekomendasikan Pest dan panduan migrasi mengganti pola Volt dengan Livewire::test(). Jangan mencampur helper khusus versi 3.x dengan API versi 4.x tanpa memeriksa dokumentasi yang sesuai dengan dependensi proyek. [Dokumentasi Volt 3.x] [Pengujian Livewire 4.x] [Panduan peningkatan Livewire 4.x]
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
