Ce sunt componentele Laravel și cum să le folosești

Componentele Laravel sunt o caracteristică avansată, care este adăugată de a șaptea versiune a laravel. În acest articol vom vedea care este componenta, cum să o creăm, cum să folosiți componentele în modelul blade și cum să parametrizați componenta prin trecerea parametrilor.

Ce este componenta Laravel?

O componentă este o bucată de cod pe care o putem reutiliza în orice șablon blade. Este ceva de genul secțiunilor, aspectului și includerilor. De exemplu, folosim același antet pentru fiecare șablon, astfel încât să putem crea o componentă Header, pe care o putem reutiliza.

O altă utilizare a componentelor pentru o mai bună înțelegere este ca și cum ar trebui să utilizați un buton de înscriere pe site în multe locuri, cum ar fi în antet, subsol sau oriunde altundeva pe site. Apoi creați o componentă a codului butonului respectiv și reutilizați-o.

Cum se creează componente în Laravel

De exemplu, să creăm o componentă Header cuArtisan:

php artisan make:component Header

Această comandă creează două fișiere în proiectul tău laravel:

• un fișier PHP cu numele Header.php în interiorul directorului app/http/View/Components;
• și un fișier blade HTML cu numele header.blade.php în interiorul directorului resources/views/components/.

De asemenea, puteți crea componente într-un subdirector, cum ar fi:

php artisan make:component Forms/Button

Această comandă va crea o componentă de buton în director App\View\Components\Forms iar fișierul blade va fi plasat în directorul resurse/views/components/forms.

Pentru a reda componenta în fișierul blade HTML, vom folosi această sintaxă:

Exemplu de componente Laravel

Mai întâi inserăm un cod HTML în fișier header.blade.php a componentei.

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

acum creați un fișier de vizualizare users.blade.php în folderul resurse, unde putem folosi componenta antet.

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

acum, prin intermediul sistemului rutare de Laravel, apelăm lama pentru a afișa rezultatul în browser

Cum se transmite date către componentele Laravel

Pentru a transmite date către componentă Blade se utilizează următoarea sintaxă, specificând valoarea aferentă parametrului din interiorul elementului HTML:

<x-header message=”Utenti” />

De exemplu, am folosit componenta anterioară în fișierul users.blade.php.

Ar trebui defiterminați datele componente în fișierul header.php. Toate datele variabilelor publice au fost disponibile automat pentru vizualizarea componentelor.

Adăugați codul în fișier header.php în directorul app/http/View/Components/ .

<?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;

   }
}

După cum puteți vedea, metoda constructorului clasei setează variabila $title cu valoarea parametrului transmis componentului. Acum adăugați variabila $title în fișierul component header.blade.php pentru a arăta datele din trecut.

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

Acum aceste date ale componentelor transmise vor fi afișate în browser.

În mod similar, puteți utiliza această componentă pe o altă pagină de vizualizare cu date diferite, creând un alt fișier de vizualizare blade contact.blade.php și adăugați mai jos codul componentei pentru a afișa datele transmise.

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

În componentă, uneori trebuie să specificați atribute HTML suplimentare, cum ar fi numele clasei CSS, îl puteți adăuga direct.

<x-header class=”styleDiv” />

Ercole Palmeri