Que son os compoñentes de Laravel e como usalos

Os compoñentes de Laravel son unha función avanzada, que se engade coa sétima versión de Laravel. Neste artigo imos ver que compoñente é, como crealo, como usar compoñentes no modelo de lámina e como parametrizar o compoñente pasando parámetros.

Que é o componente Laravel?

Un compoñente é unha peza de código que podemos reutilizar en calquera folla de modelo. É algo así como seccións, deseños e inclusións. Por exemplo, usamos a mesma cabeceira para cada modelo, polo que podemos crear un compoñente de cabeceira, que podemos reutilizar.

Outro uso dos compoñentes para unha mellor comprensión é como se necesitas usar un botón de rexistro no sitio web en moitos lugares, como no encabezado, no pé de páxina ou en calquera outro lugar do sitio web. Despois cree un compoñente dese código de botón e reutilízao.

Como crear compoñentes en Laravel

Por exemplo, imos crear un compoñente Header Co'Artisan:

php artisan make:component Header

Este comando crea dous ficheiros no teu proxecto laravel:

• un ficheiro PHP co nome Header.php dentro do directorio app/http/View/Components;
• e un ficheiro HTML co nome header.blade.php dentro do directorio resources/views/components/.

Tamén pode crear compoñentes nun subdirectorio, como:

php artisan make:component Forms/Button

Este comando creará un compoñente botón no directorio App\View\Components\Forms e o ficheiro blade colocarase no directorio resources/views/components/forms.

Para renderizar o compoñente no ficheiro HTML, usaremos esta sintaxe:

Exemplo de compoñentes Laravel

Primeiro inserimos algún código HTML no ficheiro header.blade.php do compoñente.

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

agora crea un ficheiro de visualización users.blade.php no cartafol de activos, onde podemos usar o compoñente de cabeceira.

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

agora, a través do sistema de enrutamento de laravel, chamamos á lámina para mostrar o resultado no navegador

Como pasar datos aos compoñentes de Laravel

Para pasar datos ao compoñente Blade utilízase a seguinte sintaxe, especificando o valor relacionado co parámetro dentro do elemento HTML:

<x-header message=”Utenti” />

Por exemplo, usamos o compoñente anterior no ficheiro users.blade.php.

Deberías defiremata os datos dos compoñentes no ficheiro header.php. Todos os datos de variables públicas estaban dispoñibles automaticamente para a vista de compoñentes.

Engade o código no ficheiro header.php dentro do directorio 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;

   }
}

Como podes ver, o método construtor da clase establece a variable $title co valor do parámetro pasado ao compoñente. Agora engade a variable $title no ficheiro de compoñentes header.blade.php para mostrar datos pasados.

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

Agora estes datos de compoñentes transmitidos mostraranse no navegador.

Do mesmo xeito, pode usar este compoñente noutra páxina de visualización con datos diferentes, creando outro ficheiro de visualización blade contact.blade.php e engade abaixo o código do compoñente para mostrar os datos pasados.

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

No compoñente, ás veces cómpre especificar atributos HTML adicionais, como o nome da clase CSS, pode engadilo directamente.

<x-header class=”styleDiv” />

Ercole Palmeri