Hva er Laravel-komponenter og hvordan du bruker dem

Laravel-komponenter er en avansert funksjon, som er lagt til av den syvende versjonen av laravel. I denne artikkelen skal vi se hva komponenten er, hvordan du lager den, hvordan du bruker komponenter i bladmodellen og hvordan du parameteriserer komponenten ved å sende parametere.

Hva er Laravel-komponenten?

En komponent er et stykke kode som vi kan gjenbruke i et hvilket som helst malblad. Det er noe som seksjoner, oppsett og inkluderer. For eksempel bruker vi samme header for hver mal, slik at vi kan lage en Header-komponent, som vi kan gjenbruke.

En annen bruk av komponenter for bedre forståelse er som om du trenger å bruke en registreringsknapp på nettstedet mange steder som i topptekst, bunntekst eller andre steder på nettstedet. Lag deretter en komponent av den knappekoden og gjenbruk den.

Hvordan lage komponenter i Laravel

La oss for eksempel lage en komponent Header Med'Artisan:

php artisan make:component Header

Denne kommandoen oppretter to filer i laravel-prosjektet ditt:

• en PHP-fil med navnet Header.php inne i katalogen app/http/View/Components;
• og en HTML-bladfil med navnet header.blade.php inne i katalogen resources/views/components/.

Du kan også opprette komponenter i en underkatalog, for eksempel:

php artisan make:component Forms/Button

Denne kommandoen vil opprette en knappekomponent i katalogen App\View\Components\Forms og bladfilen vil bli plassert i katalogen ressurser/visninger/komponenter/skjemaer.

For å gjengi komponenten i HTML-bladfilen, bruker vi denne syntaksen:

Eksempel på Laravel-komponenter

Først setter vi inn litt HTML-kode i filen header.blade.php av komponenten.

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

lag nå en visningsfil users.blade.php i assets-mappen, hvor vi kan bruke header-komponenten.

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

nå, gjennom systemet av ruting av laravel kaller vi bladet for å vise resultatet i nettleseren

Hvordan overføre data til Laravel-komponenter

For å sende data til komponenten Blade Følgende syntaks brukes, og spesifiserer verdien relatert til parameteren inne i elementet HTML:

<x-header message=”Utenti” />

For eksempel brukte vi den forrige komponenten i filen users.blade.php.

Du burde defifullfør komponentdataene i header.php-filen. Alle offentlige variabeldata var automatisk tilgjengelig for komponentvisningen.

Legg til koden i filen header.php inne i app/http/View/Components/-katalogen .

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

   }
}

Som du kan se, setter konstruktørmetoden til klassen variabelen $title med parameterverdien sendt til komponenten. Legg nå til variabelen $title i komponentfilen header.blade.php for å vise tidligere data.

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

Nå vil disse overførte komponentdataene vises i nettleseren.

På samme måte kan du bruke denne komponenten på en annen visualiseringsside med andre data, ved å opprette en annen visualiseringsfil blade contact.blade.php og legg til komponentkoden nedenfor for å vise beståtte data.

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

I komponenten må du noen ganger spesifisere flere HTML-attributter, for eksempel CSS-klassenavn, du kan legge det til direkte.

<x-header class=”styleDiv” />

Ercole Palmeri