Artiklar

Vad är Laravel-komponenter och hur man använder dem

Laravel-komponenter är en avancerad funktion, som läggs till av den sjunde versionen av laravel. I den här artikeln kommer vi att se vad komponent är, hur man skapar den, hur man använder komponenter i bladmodellen och hur man parametriserar komponenten genom att skicka parametrar.

Vad är Laravel Component?

En komponent är en kodbit som vi kan återanvända i vilket mallblad som helst. Det är något som sektioner, layouter och inkluderar. Till exempel använder vi samma rubrik för varje mall, så vi kan skapa en Header-komponent som vi kan återanvända.

En annan användning av komponenter för bättre förståelse är som att du behöver använda en registreringsknapp på webbplatsen på många ställen som i sidhuvud, sidfot eller någon annanstans på webbplatsen. Så skapa en komponent av den knappkoden och återanvänd den.

Hur man skapar komponenter i Laravel

Låt oss till exempel skapa en komponent Header medArtisan:

php artisan make:component Header

Detta kommando skapar två filer i ditt laravel-projekt:

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

Du kan också skapa komponenter i en underkatalog, till exempel:

php artisan make:component Forms/Button

Detta kommando skapar en knappkomponent i katalogen App\View\Components\Forms och bladfilen kommer att placeras i katalogen resources/views/components/forms.

För att rendera komponenten i HTML-bladfilen kommer vi att använda denna syntax:

Exempel på Laravel-komponenter

Först infogar vi lite HTML-kod i filen header.blade.php av komponenten.

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

skapa nu en vyfil users.blade.php i tillgångsmappen, där vi kan använda rubrikkomponenten.

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

nu, genom systemet för routing av laravel kallar vi bladet för att visa resultatet i webbläsaren

Hur man skickar data till Laravel-komponenter

För att skicka data till komponenten Blade Följande syntax används och anger värdet relaterat till parametern inuti elementet HTML:

<x-header message=”Utenti” />

Till exempel använde vi den tidigare komponenten i filen users.blade.php.

Du borde defiavsluta komponentdatan i filen header.php. All offentlig variabeldata var automatiskt tillgänglig för komponentvyn.

Lägg till koden i filen header.php inuti 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 anger konstruktormetoden för klassen variabeln $title med parametervärdet skickat till komponenten. Lägg nu till variabeln $title i komponentfilen header.blade.php för att visa tidigare data.

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

Nu kommer denna överförda komponentdata att visas i webbläsaren.

På samma sätt kan du använda den här komponenten på en annan visualiseringssida med andra data, genom att skapa en annan visualiseringsfil blade contact.blade.php och lägg till nedanstående komponentkod för att visa överförd data.