Laravel Livewire yra puikus įrankis, leidžiantis pasiekti dinamišką elgseną tinklalapyje, tiesiogiai neįrašant JavaScript kodo. Tai leidžia lengvai kurti dinamines sąsajas, nepaliekant Laravel komforto. Neseniai Livewire branduolys buvo visiškai perrašytas.

Naujasis „Livewire v3“ turi geresnį skirtumą, funkcijos gali būti sukurtos greičiau ir dubliuojama mažiau tarp Livewire ir Alpine, nes ji labiau remiasi Alpine ir naudoja savo Morph, History ir kt įskiepių. Kai kurios naujos funkcijos taip pat buvo įmanomos pertvarkant kodų bazę ir daugiau dėmesio skiriant Alpine.

1. Automatiškai įšvirkškite Livewire scenarijus, stilius ir Alpine

Kompozitoriui įdiegus Livewire v2, turite rankiniu būdu į savo maketą įtraukti @livewireStyles, @livewireScripts ir Alpine. Naudojant Livewire v3, jums tereikia įdiegti Livewire ir viskas, ko jums reikia, bus automatiškai suleidžiama, įskaitant Alpine!

<!DOCTYPE html>
<html lang="lt">
<galva>
<scenarijus src="//unpkg.com/alpinejs" atidėti></script>
@livewireStyles@livewireScripts
</head>
<kūnas>
 ...
</body>
</html>
instagram viewer

2. JavaScript funkcijos PHP klasėse

„Livewire v3“ palaikys „JavaScript“ funkcijų rašymą tiesiogiai jūsų „Livewire“ komponentuose. Pridėkite funkciją prie savo komponento, pridėkite /\*_ @js _/ komentarą virš funkcijos, tada grąžinkite JavaScript kodą naudodami PHP HEREDOC sintaksę ir iškvieskite jį iš savo sąsajos. „JavaScript“ kodas bus vykdomas nesiunčiant jokių užklausų į jūsų užklausą.

<?php
vardų erdvėProgramėlė\Http\Livewire;
klasėTodostęsiasi \Livewire\Komponentas
{
/** @prop */
viešas $todos;
/** @js */
viešasfunkcijaaišku()
 {
 grąžinti <<<'JS'
 tai.todo = '';
 JS;
 }
}
?>
<div>
<įvesties laidas: modelis="daryti" />
<mygtuko laidas: spustelėkite ="aišku">Aišku</button>
</div>

3. Užrakintos ypatybės

Livewire v3 palaikys užrakintas ypatybes – ypatybes, kurių negalima atnaujinti iš sąsajos. Virš komponento nuosavybės pridėkite /\*\* @locked / komentarą ir „Livewire“ padarys išimtį, jei kas nors bandys atnaujinti tą nuosavybę iš sąsajos.

<?php
vardų erdvėProgramėlė\Http\Livewire;
klasėTodostęsiasi \Livewire\Komponentas
{
/** @užrakinta */
viešas $todos = [];
}
?>

4. Laidas: modelis yra atidėtas pagal numatytuosius nustatymus

Tobulėjant „Livewire“ ir jos naudojimui, supratome, kad „atidėtas“ elgesys yra prasmingesnis 95 % formų, todėl 3 versijoje „atidėta“ funkcija bus numatytoji. Taip sutaupysite nereikalingų užklausų, siunčiamų į jūsų serverį, ir pagerinsite našumą. Kai jums reikia „tiesioginės“ įvesties funkcijos, galite naudoti laidą: model.live, kad įgalintumėte šią funkciją.

Tai vienas iš nedaugelio pakeitimų iš v2 į v3.

5. Prašymai sugrupuoti

„Livewire v2“, jei turite kelis komponentus, naudojančius laidą: apklausa arba renginių siuntimas ir išklausymas, kiekvienas iš šių komponentų siųs atskiras užklausas serveriui kiekvienoje apklausoje ar įvykyje. „Livewire v3“ yra protingas užklausų paketas, kad būtų galima sujungti: apklausas, įvykius, klausytojus ir metodo skambučiai gali būti sugrupuoti į vieną užklausą, kai įmanoma, taip sutaupant dar daugiau užklausų ir tobulinant spektaklis.

6. Reaktyviosios savybės

Livewire v3, kai jūs perduoti duomenų dalį antriniam komponentui , pridėkite/\*_ @prop _/ komentarą virš ypatybės antriniame komponente, tada atnaujinkite jį pirminiame komponente, jis bus atnaujintas antriniame komponente.

<?php
vardų erdvėProgramėlė\Http\Livewire;
klasėTodosCounttęsiasi \Livewire\Komponentas{
/** @prop */
viešas $todos;
viešasfunkcijapateikti(){
 grąžinti <<<'HTML'
<div>
 Užduotys: {{ count($todos) }}
</div>
 HTML;
 }
 }

7. Pasiekite pagrindinio komponento duomenis ir metodus naudodami $parent

„Livewire v3“ bus naujas būdas pasiekti pirminio komponento duomenis ir metodus. Yra nauja $parent nuosavybė, kurią galima pasiekti norint iškviesti pagrindinio įrenginio metodus.

<?php
vardų erdvėProgramėlė\Http\Livewire;
klasėTodoInputtęsiasi \Livewire\Komponentas{
/** @modeliuojamas */
viešas $vertė = '';
viešasfunkcijapateikti(){
 grąžinti <<<'HTML'
<div>
<įvesties laidas: modelis="vertė" laidas: keydown.enter="$parent.add()">
</div>
 HTML;
 }
 }

8. Teleportuotis

„Livewire v3“ taip pat apims naują @teleport Blade direktyvą, kuri leis „teleportuoti“ žymėjimo dalį ir paversti ją kita DOM dalimi. Tai kartais gali padėti išvengti z indekso problemų, susijusių su modalais ir išstumtais.

<div>
<mygtuko laidas: spustelėkite ="showModal">Rodyti modalą</button>
@teleportuotis('#footer&apos;)
<x-modal viela: modelis="showModal">
<!--... -->
</x-modal>
@endteleport
</div>

9. Tingūs komponentai

„Livewire v3“ pateikdami komponentą tiesiog pridėkite atributą „Lazy“ ir iš pradžių jis nebus pateiktas. Kai jis patenka į peržiūros sritį, „Livewire“ suaktyvins užklausą ją pateikti. Taip pat galėsite pridėti rezervuotos vietos turinį savo komponente įdiegę rezervuotos vietos metodą.

<div>
<mygtuko laidas: spustelėkite ="showModal">Rodyti modalą</button>
@teleportuotis('#footer&apos;)
<x-modal viela: modelis="showModal">
<livewire: pavyzdys-komponentas tinginys />
</x-modal>
@endteleport
</div>
<?php
vardų erdvėProgramėlė\Http\Livewire;
KlasėPavyzdysKomponentastęsiasi \Livewire\Komponentas{
viešasstatinisfunkcijavietos rezervuaras(){
grąžinti <<<'HTML'
<x-suktukas />
>>>
}
viešas funkcija pateikti()/** [tl! griūti: 7] */{
 grąžinti <<<'HTML'
<div>
 Užduotys: {{count($todos) }}
</div>
 HTML;
 }
}
?>

„Livewire V3“ paprastumas ir galia

Tai yra paprastumo ir galios derinys Laravel Livewire toks nuostabus ir kodėl jį naudoja tiek daug kūrėjų. Tai ypač gera alternatyva Laravel + Inertia + Vue deriniui. Visų pirma, Laravel taip pat yra susietas su kitomis sistemomis, kurios yra galingos ir su kuriomis galima dirbti.