Šta su Laravel komponente i kako ih koristiti

Laravel komponente su napredna funkcija koju dodaje sedma verzija laravela. U ovom članku ćemo vidjeti što je komponenta, kako je kreirati, kako koristiti komponente u blade modelu i kako parametrizovati komponentu prosljeđivanjem parametara.

Šta je Laravel komponenta?

Komponenta je dio koda koji možemo ponovo koristiti u bilo kojem bladeu šablona. To je nešto poput sekcija, izgleda i uključuje. Na primjer, koristimo isto zaglavlje za svaki predložak, tako da možemo kreirati komponentu zaglavlja, koju možemo ponovo koristiti.

Druga upotreba komponenti za bolje razumijevanje je kao da trebate koristiti dugme za registraciju na web stranici na mnogim mjestima kao što su zaglavlje, podnožje ili bilo gdje drugdje na web stranici. Zatim kreirajte komponentu koda tog gumba i ponovo je koristite.

Kako kreirati komponente u Laravelu

Na primjer, napravimo komponentu Header Sa'Artisan:

php artisan make:component Header

Ova naredba kreira dvije datoteke u vašem laravel projektu:

• PHP fajl sa imenom Header.php unutar direktorija app/http/View/Components;
• i HTML blade fajl sa imenom header.blade.php unutar direktorija resources/views/components/.

Također možete kreirati komponente u poddirektoriju, kao što su:

php artisan make:component Forms/Button

Ova komanda će kreirati komponentu dugmeta u direktorijumu App\View\Components\Forms a blade datoteka će biti smještena u direktorij resources/views/components/forms.

Za prikazivanje komponente u HTML blade fajlu, koristićemo ovu sintaksu:

Primjer Laravel komponenti

Prvo ubacimo neki HTML kod u datoteku header.blade.php komponente.

<div><h1> Header Component </h1></div>

sada kreirajte datoteku za pregled users.blade.php u folderu imovine, gdje možemo koristiti komponentu zaglavlja.

<x-header /><h1>User Page</h1>

sada, kroz sistem rutiranje laravel-a, pozivamo blade da prikažemo rezultat u pretraživaču

Kako proslijediti podatke Laravel komponentama

Za prosljeđivanje podataka komponenti Blade koristi se sljedeća sintaksa, specificirajući vrijednost koja se odnosi na parametar unutar elementa HTML:

<x-header message=”Utenti” />

Na primjer, koristili smo prethodnu komponentu u datoteci users.blade.php.

Trebao bi defizavršite podatke komponente u datoteci header.php. Svi podaci o javnim varijablama automatski su bili dostupni za prikaz komponente.

Dodajte kod u datoteku header.php unutar app/http/View/Components/ direktorija .

<?php

namespace App\View\Components;
use Illuminate\View\Component;

   class Header extends Component{

   /*** The alert type.** @var string*/

   public $title = "";

   public function __construct($message){

   $this->title = $message;

   }
}

Kao što vidite, metod konstruktora klase postavlja promenljivu $title sa vrijednošću parametra proslijeđenom komponenti. Sada dodajte varijablu $title u datoteci komponente header.blade.php za prikaz prošlih podataka.

<div> <h1> {{$title}}'s Header Component </h1> </div>

Sada će ovi preneseni podaci komponente biti prikazani u pretraživaču.

Slično, ovu komponentu možete koristiti na drugoj stranici za vizualizaciju s različitim podacima, kreiranjem druge datoteke vizualizacije blade contact.blade.php i dodajte kod komponente ispod da prikažete proslijeđene podatke.

<x-header message=”Contact Us” />

U komponenti, ponekad morate navesti dodatne HTML atribute, kao što je ime CSS klase, možete ga dodati direktno.

<x-header class=”styleDiv” />

Ercole Palmeri