Cosa sono i componenti di Laravel e come si usano

I componenti di Laravel sono una funzionalità avanzata, che viene aggiunta dalla settima versione di laravel. In questo articolo andremo a vedere cos’è il componente, come crearlo, come utilizzare i componenti nel modello blade e come parametrizzare il componente passando dei parametri.

Cos’è il componente Laravel?

Un componente è un pezzo di codice che possiamo riutilizzare in qualsiasi template blade. È qualcosa di simile a sezioni, layout e include. Ad esempio, utilizziamo la stessa intestazione per ogni modello, quindi possiamo creare un componente Header, che possiamo riutilizzare.

Un altro utilizzo dei componenti per una migliore comprensione è come se fosse necessario utilizzare un pulsante di registrazione sul sito Web in molti punti, come nell’intestazione, nel piè di pagina o in qualsiasi altro punto del sito Web. Quindi crea un componente di quel codice pulsante e riutilizzalo.

Come creare componenti in Laravel

Ad esempio, creiamo un componente Header con l’Artisan:

php artisan make:component Header

Questo comando crea due file nel tuo progetto laravel:

• un file PHP con il nome Header.php all’interno della directory app/http/View/Components;
• e un file blade HTML con il nome header.blade.php all’interno della directory resources/views/components/.

Puoi anche creare componenti in una sottodirectory, come ad esempio:

php artisan make:component Forms/Button

Questo comando creerà un componente pulsante nella directory App\View\Components\Forms e il file blade verrà inserito nella directory resources/views/components/forms.

Per il rendering del componente nel file blade HTML, useremo questa sintassi:

<x-ComponentName/>

Esempio di componenti di Laravel

Per prima cosa inseriamo del codice HTML nel file header.blade.php del componente.

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

ora crea un file di visualizzazione users.blade.php nella cartella delle risorse, in cui possiamo utilizzare il componente header.

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

ora, tramite il sistema di routing di laravel, richiamiamo il blade per visualizzare nel browser il risultato

Come passare dati ai componenti di Laravel

Per passare i dati al componente Blade si usa la seguente sintassi, specificando il valore relativo al parametro all’interno dell’elemento HTML:

<x-header message=”Utenti” />

Ad esempio, abbiamo utilizzato il componente precedente nel file users.blade.php.

Dovresti definire i dati del componente nel file header.php. Tutti i dati delle variabili pubbliche erano automaticamente disponibili per la vista del componente.

Aggiungere il codice nel file header.php all’interno della directory 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;

   }
}

Come puoi vedere, il metodo costruttore della classe imposta la variabile $title con il valore del parametro passato al componente. Ora aggiungi la variabile $title nel file del componente header.blade.php per mostrare i dati passati.

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

Ora questi dati dei componenti trasmessi verranno visualizzati nel browser.

Allo stesso modo, puoi utilizzare questo componente su un’altra pagina di visualizzazione con dati diversi, creando un altro file di visualizzazione blade contact.blade.php e aggiungere sotto il codice del componente per mostrare i dati passati.

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

Nel componente, a volte è necessario specificare attributi HTML aggiuntivi, come il nome della classe CSS, è possibile aggiungerlo direttamente.

<x-header class=”styleDiv” />

Ercole Palmeri