Que sont les composants Laravel et comment les utiliser

Les composants Laravel sont une fonctionnalité avancée, qui est ajoutée par la septième version de laravel. Dans cet article, nous allons voir ce qu'est un composant, comment le créer, comment utiliser des composants dans le modèle de lame et comment paramétrer le composant en passant des paramètres.

Qu'est-ce que le composant Laravel ?

Un composant est un morceau de code que nous pouvons réutiliser dans n'importe quel panneau de modèle. C'est quelque chose comme des sections, des mises en page et des inclusions. Par exemple, nous utilisons le même en-tête pour chaque modèle, nous pouvons donc créer un composant Header, que nous pouvons réutiliser.

Une autre utilisation des composants pour une meilleure compréhension est que vous devez utiliser un bouton d'enregistrement sur le site Web à de nombreux endroits, comme dans l'en-tête, le pied de page ou n'importe où ailleurs sur le site Web. Créez donc un composant de ce code de bouton et réutilisez-le.

Comment créer des composants dans Laravel

Par exemple, créons un composant Header avec l''Artisan:

php artisan make:component Header

Cette commande crée deux fichiers dans votre projet laravel :

• un fichier PHP avec le nom Header.php à l'intérieur du répertoire app/http/View/Components;
• et un fichier lame HTML avec le nom header.blade.php à l'intérieur du répertoire resources/views/components/.

Vous pouvez également créer des composants dans un sous-répertoire, tels que :

php artisan make:component Forms/Button

Cette commande créera un composant de bouton dans le répertoire App\View\Components\Forms et le fichier blade sera placé dans le répertoire resources/views/components/forms.

Pour rendre le composant dans le fichier lame HTML, nous utiliserons cette syntaxe :

Exemple de composants Laravel

D'abord, nous insérons du code HTML dans le fichier header.blade.php du composant.

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

créez maintenant un fichier de vue users.blade.php dans le dossier assets, où nous pouvons utiliser le composant header.

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

maintenant, grâce au système de routage de laravel, on appelle le blade pour afficher le résultat dans le navigateur

Comment transmettre des données aux composants Laravel

Pour transmettre des données au composant Blade la syntaxe suivante est utilisée, en spécifiant la valeur liée au paramètre à l'intérieur de l'élément HTML:

<x-header message=”Utenti” />

Par exemple, nous avons utilisé le composant précédent dans le fichier users.blade.php.

vous devriez defiTerminez les données du composant dans le fichier header.php. Toutes les données de variables publiques étaient automatiquement disponibles pour la vue des composants.

Ajouter le code dans le fichier header.php dans le répertoire 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;

   }
}

Comme vous pouvez le voir, la méthode constructeur de la classe définit la variable $title avec la valeur du paramètre passée au composant. Ajoutez maintenant la variable $title dans le fichier composant header.blade.php pour afficher les données passées.

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

Maintenant, ces données de composant transmises seront affichées dans le navigateur.

De même, vous pouvez utiliser ce composant sur une autre page de visualisation avec des données différentes, en créant un autre fichier de visualisation blade contact.blade.php et ajoutez le code de composant ci-dessous pour afficher les données transmises.

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

Dans le composant, vous devez parfois spécifier des attributs HTML supplémentaires, tels que le nom de la classe CSS, vous pouvez l'ajouter directement.

<x-header class=”styleDiv” />

Ercole Palmeri