Laravel Livewire on suurepärane tööriist dünaamilise käitumise saavutamiseks veebilehel ilma JavaScripti koodi otse kirjutamata. See muudab dünaamiliste liideste loomise lihtsaks, jätmata Laraveli mugavust. Hiljuti on Livewire'i tuum täielikult ümber kirjutatud.
Uuel Livewire v3-l on parem diferentseerimine, funktsioone saab kiiremini ehitada ja dubleerimist on vähem Livewire'i ja Alpine'i vahel, kuna see tugineb rohkem Alpine'ile ja kasutab selle morfi, ajalugu ja muud pistikprogrammid. Mitmed uued funktsioonid said võimalikuks ka koodibaasi ümberstruktureerimise ja Alpine'ile suurema rõhu asetamisega.
1. Sisestage Livewire'i skriptid, stiilid ja Alpine automaatselt
Pärast helilooja Livewire v2 installimist peate käsitsi lisama oma paigutusele @livewireStyles, @livewireScripts ja Alpine. Livewire v3 abil peate lihtsalt installima Livewire ja kõik vajalik süstitakse automaatselt – sealhulgas Alpine!
<!DOCTYPE html>
<html lang="et">
<pea>
<skript src="//unpkg.com/alpinejs" edasi lükata></script>
@livewireStyles@livewireScripts
</head>
<keha>
...
</body>
</html>2. JavaScripti funktsioonid PHP klassides
Livewire v3 toetab JavaScripti funktsioonide kirjutamist otse teie taustaprogrammi Livewire komponentidesse. Lisage oma komponendile funktsioon, lisage funktsiooni kohale /\*_ @js _/ kommentaar, seejärel tagastage JavaScripti kood, kasutades PHP HEREDOC süntaksit ja kutsuge see oma kasutajaliidesest välja. JavaScripti kood käivitatakse ilma teie taustaprogrammi päringuid saatmata.
<?php
nimeruumRakendus\HTTP\Voolu all olev juhe;
klassTodosulatub \Voolu all olev juhe\Komponent
{
/** @prop */
avalik $todos;
/** @js */
avalikfunktsiooniselge()
{
tagasi <<<'JS'
see.todo = '';
JS;
}
}
?>
<div>
<sisendjuhe: mudel="tegema" />
<nupu juhe: klõps="selge">Selge</button>
</div>3. Lukustatud omadused
Livewire v3 toetab lukustatud atribuute – atribuute, mida ei saa frontendist värskendada. Lisage oma komponendi atribuudi kohale /\*\* @locked / kommentaar ja Livewire teeb erandi, kui keegi üritab seda atribuuti esiservast värskendada.
<?php
nimeruumRakendus\HTTP\Voolu all olev juhe;
klassTodosulatub \Voolu all olev juhe\Komponent
{
/** @lukustatud */
avalik $todos = [];
}
?>4. Traat: mudel on vaikimisi edasi lükatud
Kuna Livewire ja selle kasutamine on arenenud, oleme mõistnud, et edasilükatud käitumine on 95% vormide puhul mõistlikum, seega on versioonis 3 vaikefunktsiooniks edasilükatud funktsioon. See säästab teie serverisse suunduvate tarbetute päringute arvelt ja parandab jõudlust. Kui vajate sisendis "reaalajas" funktsiooni, võite selle funktsiooni lubamiseks kasutada traati: model.live.
See on üks väheseid muudatusi, mis katkestavad versioonilt v2 versioonile v3.
5. Taotlused komplekteeritakse
Livewire v2 puhul, kui teil on traati kasutav mitu komponenti: poll või sündmuste saatmine ja kuulamine, saadab igaüks neist komponentidest iga küsitluse või sündmuse kohta serverile eraldi päringud. Livewire v3-s on taotluste intelligentne komplekteerimine, et edastada: küsitlused, sündmused, kuulajad ja meetodikutsed saab võimaluse korral koondada üheks päringuks, säästes veelgi rohkem taotlusi ja täiustades esitus.
6. Reaktiivsed omadused
Livewire v3-s, kui te edastada osa andmeid alamkomponendile , lisage alamkomponendis atribuudi kohale kommentaar/\*_ @prop _/, seejärel värskendage seda ülemkomponendis, seda värskendatakse alamkomponendis.
<?php
nimeruumRakendus\HTTP\Voolu all olev juhe;
klassTodosCountulatub \Voolu all olev juhe\Komponent{
/** @prop */
avalik $todos;
avalikfunktsioonirenderdama(){
tagasi <<<'HTML'
<div>
Ülesanded: {{ count($todos) }}
</div>
HTML;
}
}7. Juurdepääs emakomponendi andmetele ja meetoditele, kasutades $parent
Livewire v3-s on uus viis emakomponendi andmetele ja meetoditele juurde pääsemiseks. Seal on uus atribuut $parent, millele pääseb juurde vanemal meetodite kutsumiseks.
<?php
nimeruumRakendus\HTTP\Voolu all olev juhe;
klassTodoInputulatub \Voolu all olev juhe\Komponent{
/** @modelleeritav */
avalik $väärtus = '';
avalikfunktsioonirenderdama(){
tagasi <<<'HTML'
<div>
<sisendjuhe: mudel="väärtus" juhe: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. Teleport
Livewire v3 sisaldab ka uut @teleport Blade'i direktiivi, mis võimaldab teil "teleportida" osa märgistusest ja muuta see DOM-i teiseks osaks. See võib mõnikord aidata vältida z-indeksi probleeme modaalide ja slaidide puhul.
<div>
<nupu juhe: klõps="showModal">Näita modaali</button>
@teleport('#jalus')
<x-modaalne juhe: mudel="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Laisad komponendid
Livewire v3-s lisage komponendi renderdamisel lihtsalt atribuut laisk ja seda esialgu ei renderdata. Kui tegemist on vaateaknaga, käivitab Livewire taotluse selle renderdamiseks. Samuti saate lisada kohatäite sisu, rakendades oma komponendis kohatäitemeetodit.
<div>
<nupu juhe: klõps="showModal">Näita modaali</button>
@teleport('#jalus')
<x-modaalne juhe: mudel="showModal">
<livewire: näide-komponent laisk />
</x-modal>
@endteleport
</div>
<?php
nimeruumRakendus\HTTP\Voolu all olev juhe;
KlassNäideComponentulatub \Voolu all olev juhe\Komponent{
avalikstaatilinefunktsioonikohatäide(){
tagasi <<<'HTML'
<x-spinner />
>>>
}
avalik funktsiooni renderdama()/** [tl! kokkuvarisemine: 7] */{
tagasi <<<'HTML'
<div>
Ülesanded: {{count($todos) }}
</div>
HTML;
}
}
?>Lihtsus ja võimsus Livewire V3-s
Lihtsuse ja jõu kombinatsioon on see, mis teeb Laravel Livewire nii vinge ja miks seda nii paljud arendajad kasutavad. See on eriti hea alternatiiv Laravel + Inertia + Vue kombinatsioonile. Eelkõige on Laravel komplekteeritud ka muude raamistikega, mis on võimsad ja millega saab töötada.
