Wat zijn Laravel-componenten en hoe ze te gebruiken

Laravel-componenten zijn een geavanceerde functie, die is toegevoegd door de zevende versie van laravel. In dit artikel gaan we kijken wat een component is, hoe je het kunt maken, hoe je componenten in het blade-model kunt gebruiken en hoe je de component kunt parametriseren door parameters door te geven.

Wat is Laravel-component?

Een component is een stuk code dat we kunnen hergebruiken in elke sjabloonblade. Het is zoiets als secties, lay-outs en insluitsels. We gebruiken bijvoorbeeld dezelfde koptekst voor elke sjabloon, zodat we een koptekstcomponent kunnen maken, die we kunnen hergebruiken.

Een ander gebruik van componenten voor een beter begrip is alsof u op veel plaatsen een registratieknop op de website moet gebruiken, zoals in de koptekst, voettekst of ergens anders op de website. Maak dus een component van die knopcode en hergebruik deze.

Componenten maken in Laravel

Laten we bijvoorbeeld een component maken Header met l 'Artisan:

php artisan make:component Header

Deze opdracht maakt twee bestanden in uw laravel-project:

• een PHP-bestand met de naam Header.php binnen de map app/http/View/Components;
• en een HTML-bladebestand met de naam header.blade.php binnen de map resources/views/components/.

U kunt ook componenten in een subdirectory maken, zoals:

php artisan make:component Forms/Button

Met deze opdracht wordt een knopcomponent in de directory gemaakt App\View\Components\Forms en het blade-bestand wordt in de map resources/views/components/forms geplaatst.

Voor het weergeven van de component in het HTML-bladebestand gebruiken we deze syntaxis:

Voorbeeld van Laravel-componenten

Eerst voegen we wat HTML-code toe aan het bestand header.blade.php van het onderdeel.

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

maak nu een weergavebestand aan users.blade.php in de resources-map, waar we de header-component kunnen gebruiken.

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

nu, via het systeem van routing van laravel, roepen we het blad aan om het resultaat in de browser weer te geven

Gegevens doorgeven aan Laravel-componenten

Om gegevens door te geven aan de component Blade de volgende syntaxis wordt gebruikt, die de waarde specificeert die gerelateerd is aan de parameter in het element HTML:

<x-header message=”Utenti” />

We hebben bijvoorbeeld de vorige component in het bestand users.blade.php gebruikt.

Je zou moeten defiVoltooi de componentgegevens in het bestand header.php. Alle openbare variabele gegevens waren automatisch beschikbaar voor de componentweergave.

Voeg de code toe aan het bestand header.php in de map 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;

   }
}

Zoals u kunt zien, stelt de constructormethode van de klasse de variabele in $title met de parameterwaarde doorgegeven aan de component. Voeg nu de variabele toe $title in het componentenbestand header.blade.php om gegevens uit het verleden weer te geven.

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

Nu worden deze verzonden componentgegevens in de browser weergegeven.

Op dezelfde manier kunt u deze component op een andere visualisatiepagina met andere gegevens gebruiken door een ander visualisatiebestand te maken blade contact.blade.php en voeg onderstaande componentcode toe om doorgegeven gegevens weer te geven.

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

In de component moet u soms aanvullende HTML-attributen specificeren, zoals de naam van de CSS-klasse, u kunt deze rechtstreeks toevoegen.

<x-header class=”styleDiv” />

Ercole Palmeri