laravel7-programacion-clicko-informatica

Los componentes ya existían en Laravel como directivas Blade pero, en Laravel 7, lo han llevado a un nivel completamente nuevo, en este blog vamos a ver unos ejemplos de cómo utilizarlos.

Crear Componente

Un nuevo comando Artisan está disponible para crear fácilmente componentes:

$ php artisan make:component Alert

Este comando creará dos archivos:

  • Un archivo de clase (app\view\components\alert.php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php

namespace App\View\Components;
use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */

    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */

    public function render()
    {
        return view('components.alert');
    }
}
  • Un archivo Blade (resources\views\components\alert.blade.php)
<div>
      <!-- He who is contented is rich. - Laozi -->
</div>

Editamos el archivo Blade para poder ver los cambios al renderizarlo.

<div>
      <h3>Alert Component</h3>
</div>

Renderizar Componente

Los componentes están destinados a ser utilizados dentro de las plantillas Blade. Hay una sintaxis especial para usar un componente en el archivo Blade.

El tipo de sintaxis es x seguido del nombre del componente en kebab case.

En nuestro ejemplo seria x-alert.

Vamos a utilizar nuestro componente en la bade welcome.blade.php

<div class="content">
      <div class="title m-b-md">
            Laravel
      </div>
      <div>
            <x-alert/>
      </div>
</div>

Pasar datos a componentes

Podemos pasar datos a través de atributos HTML. Es similar a pasar props en un componente Vue.

  • Pasar un valor directamente:
<x-alerts.success />
  • Variables o expresiones se tienen que pasar con el prefijo :
<x-alert :message="$message" />

En la clase del componente estas variables tienen que estar disponible desde el constructor:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Alert extends Component
{
    public string $type;

    public string $message;

    public function __construct(string $type, string $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */

    public function render()
    {
        return view('components.alert');
    }
}

Las propiedades tienen que ser publicas para que estén disponibles desde la view del componente.

Con esto cubrimos lo más básico de esta funcionalidad de componentes que nos da laravel, estate atento a nuestro blog para ver más artículos donde veremos Componentes anónimos y poder acceder a funciones publicas desde las views de los componentes.

Twitter
Visit Us
Follow Me
LinkedIn
Share