Hvad er Laravel-komponenter, og hvordan man bruger dem

Laravel-komponenter er en avanceret funktion, som er tilføjet af den syvende version af laravel. I denne artikel skal vi se, hvad komponent er, hvordan man opretter den, hvordan man bruger komponenter i bladmodellen, og hvordan man parametrerer komponenten ved at videregive parametre.

Hvad er Laravel-komponent?

En komponent er et stykke kode, som vi kan genbruge i enhver skabelonblade. Det er noget som sektioner, layout og inkluderer. For eksempel bruger vi den samme header til hver skabelon, så vi kan lave en Header-komponent, som vi kan genbruge.

En anden brug af komponenter for bedre forståelse er som om du skal bruge en registreringsknap på hjemmesiden mange steder som i sidehoved, sidefod eller andre steder på hjemmesiden. Opret derefter en komponent af den knapkode og genbrug den.

Sådan opretter du komponenter i Laravel

Lad os for eksempel oprette en komponent Header Med'Artisan:

php artisan make:component Header

Denne kommando opretter to filer i dit laravel-projekt:

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

Du kan også oprette komponenter i en undermappe, såsom:

php artisan make:component Forms/Button

Denne kommando vil oprette en knapkomponent i mappen App\View\Components\Forms og blade-filen vil blive placeret i biblioteket ressourcer/visninger/komponenter/formularer.

Til gengivelse af komponenten i HTML-blade-filen vil vi bruge denne syntaks:

Eksempel på Laravel komponenter

Først indsætter vi noget HTML-kode i filen header.blade.php fra komponenten.

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

opret nu en visningsfil users.blade.php i aktivmappen, hvor vi kan bruge header-komponenten.

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

nu gennem systemet af routing af laravel, kalder vi bladet for at vise resultatet i browseren

Sådan sender du data til Laravel-komponenter

At sende data til komponenten Blade Følgende syntaks bruges, der angiver værdien relateret til parameteren inde i elementet HTML:

<x-header message=”Utenti” />

For eksempel brugte vi den forrige komponent i filen users.blade.php.

Du burde defifærdiggør komponentdataene i header.php-filen. Alle offentlige variabeldata var automatisk tilgængelige for komponentvisningen.

Tilføj koden i filen header.php inde i app/http/View/Components/ bibliotek .

<?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, sætter konstruktørmetoden for klassen variablen $title med parameterværdien videregivet til komponenten. Tilføj nu variablen $title i komponentfilen header.blade.php for at vise tidligere data.

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

Nu vil disse overførte komponentdata blive vist i browseren.

På samme måde kan du bruge denne komponent på en anden visualiseringsside med andre data ved at oprette en anden visualiseringsfil blade contact.blade.php og tilføj komponentkoden nedenfor for at vise beståede data.

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

I komponenten skal du nogle gange angive yderligere HTML-attributter, såsom CSS-klassenavn, du kan tilføje det direkte.

<x-header class=”styleDiv” />

Ercole Palmeri