• Introducción

  • Herencia de plantilla

    • Definición de un diseño
    • Ampliación de un diseño

  • Visualización de datos

    • Frameworks Blade y JavaScript

  • Estructuras de Control

    • Si declaraciones
    • Cambiar declaraciones
    • Bucles
    • La variable de bucle
    • Comentarios
    • PHP
    • los @once Directiva

  • Formularios

    • Campo CSRF
    • Campo de método
    • Errores de validación

  • Componentes

    • Visualización de componentes
    • Pasar datos a componentes
    • Administrar atributos
    • Ranuras
    • Vistas de componentes en línea
    • Componentes anónimos
    • Componentes dinámicos

  • Incluyendo subvistas

    • Representación de vistas para colecciones
  • Pilas
  • Inyección de servicio

  • Hoja extensible

    • Declaraciones If personalizadas

Introducción

Blade es el motor de plantillas simple pero poderoso provisto con Laravel. A diferencia de otros motores de plantillas PHP populares, Blade no le impide usar código PHP simple en sus vistas. De hecho, todas las vistas de Blade se compilan en código PHP simple y se almacenan en caché hasta que se modifican, lo que significa que Blade agrega esencialmente cero gastos generales a su aplicación. Los archivos de vista de hoja utilizan el .blade.php extensión de archivo y normalmente se almacenan en la resources/views directorio.

Herencia de plantilla

Definición de un diseño

Dos de los principales beneficios de usar Blade son herencia de plantilla y secciones. Para empezar, echemos un vistazo a un ejemplo sencillo. Primero, examinaremos un diseño de página “maestro”. Dado que la mayoría de las aplicaciones web mantienen el mismo diseño general en varias páginas, es conveniente definir este diseño como una sola vista Blade:

<!-- Stored in resources/views/layouts/app.blade.php -->

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="https://foroayuda.es/laravel/docs/8.x/container">
            @yield('content')
        </div>
    </body>
</html>

Como puede ver, este archivo contiene un marcado HTML típico. Sin embargo, tome nota de la @section y @yield directivas. los @section directiva, como su nombre lo indica, define una sección de contenido, mientras que la @yield La directiva se utiliza para mostrar el contenido de una sección determinada.

Ahora que hemos definido un diseño para nuestra aplicación, definamos una página secundaria que herede el diseño.

Ampliación de un diseño

Al definir una vista secundaria, use la hoja @extends directiva para especificar qué diseño debe “heredar” la vista secundaria. Las vistas que extienden un diseño Blade pueden inyectar contenido en las secciones del diseño usando @section directivas. Recuerde, como se ve en el ejemplo anterior, el contenido de estas secciones se mostrará en el diseño usando @yield:

<!-- Stored in resources/views/child.blade.php -->

@extends('layouts.app')

@section('title', 'Page Title')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

En este ejemplo, el sidebar sección está utilizando el @parent directiva para agregar (en lugar de sobrescribir) contenido a la barra lateral del diseño. los @parent La directiva será reemplazada por el contenido del diseño cuando se renderice la vista.

Contrariamente al ejemplo anterior, este sidebar la sección termina con @endsection en lugar de @show. los @endsection La directiva solo definirá una sección mientras @show definirá y ceder inmediatamente la sección.

los @yield La directiva también acepta un valor predeterminado como segundo parámetro. Este valor se representará si la sección que se obtiene no está definida:

@yield('content', View::make('view.name'))

Las vistas de la hoja pueden devolverse de las rutas utilizando el global view ayudante:

Route::get('blade', function () {
    return view('child');
});

Visualización de datos

Puede mostrar los datos pasados ​​a sus vistas de Blade envolviendo la variable entre llaves. Por ejemplo, dada la siguiente ruta:

Route::get('greeting', function () {
    return view('welcome', ['name' => 'Samantha']);
});

Puede mostrar el contenido del name variable así:

Hello, {{ $name }}.

Espada {{ }} las declaraciones se envían automáticamente a través de PHP htmlspecialchars función para prevenir ataques XSS.

No está limitado a mostrar el contenido de las variables pasadas a la vista. También puede hacer eco de los resultados de cualquier función de PHP. De hecho, puede poner cualquier código PHP que desee dentro de una declaración de eco de Blade:

The current UNIX timestamp is {{ time() }}.

Visualización de datos sin escape

Por defecto, Blade {{ }} las declaraciones se envían automáticamente a través de PHP htmlspecialchars función para prevenir ataques XSS. Si no desea que se escapen sus datos, puede utilizar la siguiente sintaxis:

Hello, {!! $name !!}.

Tenga mucho cuidado al hacer eco de contenido proporcionado por los usuarios de su aplicación. Utilice siempre la sintaxis de doble llave de escape para evitar ataques XSS al mostrar datos proporcionados por el usuario.

Representación de JSON

A veces, puede pasar una matriz a su vista con la intención de representarla como JSON para inicializar una variable de JavaScript. Por ejemplo:

<script>
    var app = <?php echo json_encode($array); ?>;
</script>

Sin embargo, en lugar de llamar manualmente json_encode, puede utilizar el @json Directiva Blade. los @json La directiva acepta los mismos argumentos que PHP json_encode función:

<script>
    var app = @json($array);

    var app = @json($array, JSON_PRETTY_PRINT);
</script>

Solo debes usar el @json directiva para representar las variables existentes como JSON. La plantilla Blade se basa en expresiones regulares y los intentos de pasar una expresión compleja a la directiva pueden provocar fallos inesperados.

Codificación de entidad HTML

Por defecto, Blade (y Laravel e helper) codificará dos veces las entidades HTML. Si desea deshabilitar la codificación doble, llame al Blade::withoutDoubleEncoding método del boot método de tu AppServiceProvider:

<?php

namespace AppProviders;

use IlluminateSupportFacadesBlade;
use IlluminateSupportServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::withoutDoubleEncoding();
    }
}

Frameworks Blade y JavaScript

Dado que muchos marcos de JavaScript también utilizan llaves “rizadas” para indicar que una expresión determinada debe mostrarse en el navegador, puede utilizar la @ símbolo para informar al motor de renderizado Blade que una expresión debe permanecer intacta. Por ejemplo:

<h1>Laravel</h1>

Hello, @{{ name }}.

En este ejemplo, el @ Blade eliminará el símbolo; sin embargo, {{ name }} La expresión permanecerá intacta por el motor Blade, lo que permitirá que su marco JavaScript la represente.

los @ El símbolo también se puede usar para escapar de las directivas Blade:

{{-- Blade --}}
@@json()

<!-- HTML output -->
@json()

los @verbatim Directiva

Si muestra variables de JavaScript en una gran parte de su plantilla, puede ajustar el HTML en el @verbatim directiva para que no tenga que anteponer cada declaración de eco de Blade con una @ símbolo:

@verbatim
    <div class="https://foroayuda.es/laravel/docs/8.x/container">
        Hello, {{ name }}.
    </div>
@endverbatim

Estructuras de Control

Además de la herencia de plantillas y la visualización de datos, Blade también proporciona accesos directos convenientes para estructuras de control PHP comunes, como declaraciones condicionales y bucles. Estos atajos proporcionan una forma muy clara y concisa de trabajar con las estructuras de control de PHP, sin dejar de ser familiares para sus contrapartes de PHP.

Si declaraciones

Puedes construir if declaraciones usando el @if, @elseif, @else, y @endif directivas. Estas directivas funcionan de manera idéntica a sus contrapartes de PHP:

@if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif

Para mayor comodidad, Blade también proporciona un @unless directiva:

@unless (Auth::check())
    You are not signed in.
@endunless

Además de las directivas condicionales ya discutidas, el @isset y @empty Las directivas pueden usarse como atajos convenientes para sus respectivas funciones PHP:

@isset($records)
    // $records is defined and is not null...
@endisset

@empty($records)
    // $records is "empty"...
@endempty

Directivas de autenticación

los @auth y @guest Las directivas se pueden utilizar para determinar rápidamente si el usuario actual está autenticado o es un invitado:

@auth
    // The user is authenticated...
@endauth

@guest
    // The user is not authenticated...
@endguest

Si es necesario, puede especificar la protección de autenticación que debe comprobarse al utilizar el @auth y @guest directivas:

@auth('admin')
    // The user is authenticated...
@endauth

@guest('admin')
    // The user is not authenticated...
@endguest

Directivas de sección

Puede comprobar si una sección tiene contenido utilizando el @hasSection directiva:

@hasSection('navigation')
    <div class="pull-right">
        @yield('navigation')
    </div>

    <div class="clearfix"></div>
@endif

Puede utilizar el sectionMissing directiva para determinar si una sección no tiene contenido:

@sectionMissing('navigation')
    <div class="pull-right">
        @include('default-navigation')
    </div>
@endif

Directivas medioambientales

Puede comprobar si la aplicación se está ejecutando en el entorno de producción utilizando el @production directiva:

@production
    // Production specific content...
@endproduction

O puede determinar si la aplicación se está ejecutando en un entorno específico utilizando el @env directiva:

@env('staging')
    // The application is running in "staging"...
@endenv

@env(['staging', 'production'])
    // The application is running in "staging" or "production"...
@endenv

Cambiar declaraciones

Las sentencias de cambio se pueden construir usando el @switch, @case, @break, @default y @endswitch directivas:

@switch($i)
    @case(1)
        First case...
        @break

    @case(2)
        Second case...
        @break

    @default
        Default case...
@endswitch

Bucles

Además de las declaraciones condicionales, Blade proporciona directivas simples para trabajar con estructuras de bucle de PHP. Nuevamente, cada una de estas directivas funciona de manera idéntica a sus contrapartes de PHP:

@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor

@foreach ($users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>No users</p>
@endforelse

@while (true)
    <p>I'm looping forever.</p>
@endwhile

Al realizar un bucle, puede utilizar la variable de bucle para obtener información valiosa sobre el bucle, como si se encuentra en la primera o la última iteración a través del bucle.

Al usar bucles, también puede finalizar el bucle u omitir la iteración actual:

@foreach ($users as $user)
    @if ($user->type == 1)
        @continue
    @endif

    <li>{{ $user->name }}</li>

    @if ($user->number == 5)
        @break
    @endif
@endforeach

También puede incluir la condición con la declaración de directiva en una línea:

@foreach ($users as $user)
    @continue($user->type == 1)

    <li>{{ $user->name }}</li>

    @break($user->number == 5)
@endforeach

La variable de bucle

Al realizar un bucle, $loop La variable estará disponible dentro de su bucle. Esta variable proporciona acceso a algunos bits de información útiles, como el índice del bucle actual y si esta es la primera o la última iteración a través del bucle:

@foreach ($users as $user)
    @if ($loop->first)
        This is the first iteration.
    @endif

    @if ($loop->last)
        This is the last iteration.
    @endif

    <p>This is user {{ $user->id }}</p>
@endforeach

Si está en un bucle anidado, puede acceder al bucle principal $loop variable a través de la parent propiedad:

@foreach ($users as $user)
    @foreach ($user->posts as $post)
        @if ($loop->parent->first)
            This is first iteration of the parent loop.
        @endif
    @endforeach
@endforeach

los $loop La variable también contiene una variedad de otras propiedades útiles:

Propiedad Descripción
$loop->index El índice de la iteración del ciclo actual (comienza en 0).
$loop->iteration La iteración del ciclo actual (comienza en 1).
$loop->remaining Las iteraciones que quedan en el ciclo.
$loop->count El número total de elementos de la matriz que se iteran.
$loop->first Si esta es la primera iteración a través del ciclo.
$loop->last Si esta es la última iteración del ciclo.
$loop->even Si se trata de una iteración uniforme a través del ciclo.
$loop->odd Si se trata de una iteración extraña a través del ciclo.
$loop->depth El nivel de anidamiento del bucle actual.
$loop->parent Cuando está en un bucle anidado, la variable del bucle principal.

Comentarios

Blade también le permite definir comentarios en sus vistas. Sin embargo, a diferencia de los comentarios HTML, los comentarios Blade no se incluyen en el HTML devuelto por su aplicación:

{{-- This comment will not be present in the rendered HTML --}}

PHP

En algunas situaciones, es útil incrustar código PHP en sus vistas. Puedes usar la hoja @php directiva para ejecutar un bloque de PHP simple dentro de su plantilla:

@php
    //
@endphp

Si bien Blade ofrece esta función, usarla con frecuencia puede ser una señal de que tiene demasiada lógica incrustada en su plantilla.

los @once Directiva

los @once La directiva le permite definir una parte de la plantilla que solo se evaluará una vez por ciclo de renderizado. Esto puede ser útil para insertar una determinada parte de JavaScript en el encabezado de la página utilizando pilas. Por ejemplo, si está renderizando un componente dado dentro de un bucle, es posible que solo desee enviar JavaScript al encabezado la primera vez que se renderiza el componente:

@once
    @push('scripts')
        <script>
            // Your custom JavaScript...
        </script>
    @endpush
@endonce

Formularios

Campo CSRF

Siempre que defina un formulario HTML en su aplicación, debe incluir un campo de token CSRF oculto en el formulario para que el middleware de protección CSRF pueda validar la solicitud. Puede utilizar el @csrf Directiva Blade para generar el campo token:

<form method="POST" action="/profile">
    @csrf

    ...
</form>

Campo de método

Dado que los formularios HTML no pueden hacer PUT, PATCH, o DELETE solicitudes, deberá agregar un _method campo para suplantar estos verbos HTTP. los @method La directiva Blade puede crear este campo para usted:

<form action="/foo/bar" method="POST">
    @method('PUT')

    ...
</form>

Errores de validación

los @error La directiva se puede utilizar para comprobar rápidamente si existen mensajes de error de validación para un atributo determinado. Dentro de un @error directiva, puede hacerse eco de la $message variable para mostrar el error mensaje:

<!-- /resources/views/post/create.blade.php -->

<label for="title">Post Title</label>

<input id="title" type="text" class="@error('title') is-invalid @enderror">

@error('title')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

Puede pasar el nombre de una bolsa de error específica como segundo parámetro al @error directiva para recuperar mensajes de error de validación en páginas que contienen varios formularios:

<!-- /resources/views/auth.blade.php -->

<label for="email">Email address</label>

<input id="email" type="email" class="@error('email', 'login') is-invalid @enderror">

@error('email', 'login')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

Componentes

Los componentes y las ranuras brindan beneficios similares a las secciones y diseños; sin embargo, algunos pueden encontrar el modelo mental de componentes y ranuras más fácil de entender. Hay dos enfoques para escribir componentes: componentes basados ​​en clases y componentes anónimos.

Para crear un componente basado en clases, puede usar el make:component Mando artesanal. Para ilustrar cómo utilizar los componentes, crearemos un sencillo Alert componente. los make:component comando colocará el componente en el AppViewComponents directorio:

php artisan make:component Alert

los make:component El comando también creará una plantilla de vista para el componente. La vista se colocará en el resources/views/components directorio.

Registro manual de componentes del paquete

Al escribir componentes para su propia aplicación, los componentes se descubren automáticamente dentro del app/View/Components directorio y resources/views/components directorio.

Sin embargo, si está creando un paquete que utiliza componentes Blade, deberá registrar manualmente su clase de componente y su alias de etiqueta HTML. Por lo general, debe registrar sus componentes en el boot método del proveedor de servicios de su paquete:

use IlluminateSupportFacadesBlade;

/**
 * Bootstrap your package's services.
 */
public function boot()
{
    Blade::component('package-alert', AlertComponent::class);
}

Una vez que su componente ha sido registrado, puede ser renderizado usando su alias de etiqueta:

<x-package-alert/>

Alternativamente, puede utilizar el componentNamespace método para autocargar clases de componentes por convención. Por ejemplo, un Nightshade el paquete puede tener Calendar y ColorPicker componentes que residen dentro del PackageViewsComponents espacio de nombres:

use IlluminateSupportFacadesBlade;

/**
 * Bootstrap your package's services.
 */
public function boot()
{
    Blade::componentNamespace('Nightshade\Views\Components', 'nightshade');
}

Esto permitirá el uso de los componentes del paquete por el espacio de nombres de su proveedor utilizando el package-name:: sintaxis:

<x-nightshade::calendar />
<x-nightshade::color-picker />

Blade detectará automáticamente la clase que está vinculada a este componente colocando en mayúsculas y minúsculas el nombre del componente. Los subdirectorios también son compatibles con la notación de “puntos”.

Visualización de componentes

Para mostrar un componente, puede utilizar una etiqueta de componente Blade dentro de una de sus plantillas Blade. Las etiquetas de los componentes de la hoja comienzan con la cadena x- seguido del nombre de caso de kebab de la clase de componente:

<x-alert/>

<x-user-profile/>

Si la clase de componente está anidada más profundamente dentro del AppViewComponents directorio, puede utilizar el . carácter para indicar el anidamiento de directorios. Por ejemplo, si asumimos que un componente está ubicado en AppViewComponentsInputsButton.php, podemos representarlo así:

<x-inputs.button/>

Pasar datos a componentes

Puede pasar datos a los componentes Blade utilizando atributos HTML. Los valores primitivos codificados de forma rígida se pueden pasar al componente utilizando atributos HTML simples. Las expresiones y variables de PHP deben pasarse al componente a través de atributos que utilizan el : carácter como prefijo:

<x-alert type="error" :message="$message"/>

Debe definir los datos requeridos del componente en su constructor de clases. Todas las propiedades públicas de un componente se pondrán automáticamente a disposición de la vista del componente. No es necesario pasar los datos a la vista desde el componente render método:

<?php

namespace AppViewComponents;

use IlluminateViewComponent;

class Alert extends Component
{
    /**
     * The alert type.
     *
     * @var string
     */
    public $type;

    /**
     * The alert message.
     *
     * @var string
     */
    public $message;

    /**
     * Create the component instance.
     *
     * @param  string  $type
     * @param  string  $message
     * @return void
     */
    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return IlluminateViewView|Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

Cuando se procesa su componente, puede mostrar el contenido de las variables públicas de su componente haciendo eco de las variables por nombre:

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

Caja

Los argumentos del constructor de componentes deben especificarse usando camelCase, tiempo kebab-case debe usarse al hacer referencia a los nombres de los argumentos en sus atributos HTML. Por ejemplo, dado el siguiente constructor de componentes:

/**
 * Create the component instance.
 *
 * @param  string  $alertType
 * @return void
 */
public function __construct($alertType)
{
    $this->alertType = $alertType;
}

los $alertType El argumento se puede proporcionar así:

<x-alert alert-type="danger" />

Métodos de componentes

Además de que las variables públicas estén disponibles para la plantilla de su componente, también se puede ejecutar cualquier método público en el componente. Por ejemplo, imagine un componente que tiene un isSelected método:

/**
 * Determine if the given option is the current selected option.
 *
 * @param  string  $option
 * @return bool
 */
public function isSelected($option)
{
    return $option === $this->selected;
}

Puede ejecutar este método desde la plantilla de su componente invocando la variable que coincida con el nombre del método:

<option {{ $isSelected($value) ? 'selected="selected"' : '' }} value="{{ $value }}">
    {{ $label }}
</option>

Uso de atributos y espacios dentro de la clase

Los componentes Blade también le permiten acceder al nombre del componente, los atributos y la ranura dentro del método de renderizado de la clase. Sin embargo, para acceder a estos datos, debe devolver un cierre de la render método. El Cierre recibirá un $data matriz como su único argumento:

/**
 * Get the view / contents that represent the component.
 *
 * @return IlluminateViewView|Closure|string
 */
public function render()
{
    return function (array $data) {
        // $data['componentName'];
        // $data['attributes'];
        // $data['slot'];

        return '<div>Components content</div>';
    };
}

los componentName es igual al nombre utilizado en la etiqueta HTML después de la x- prefijo. Entonces <x-alert />‘s componentName estarán alert. los attributes contendrá todos los atributos que estaban presentes en la etiqueta HTML. los slot elemento es un IlluminateSupportHtmlString instancia con el contenido de la ranura del componente.

El cierre debe devolver una cadena. Si la cadena devuelta corresponde a una vista existente, esa vista se renderizará; de lo contrario, la cadena devuelta se evaluará como una vista Blade en línea.

dependencias adicionales

Si su componente requiere dependencias del contenedor de servicios de Laravel, puede enumerarlas antes de cualquiera de los atributos de datos del componente y el contenedor las inyectará automáticamente:

use AppServicesAlertCreator

/**
 * Create the component instance.
 *
 * @param  AppServicesAlertCreator  $creator
 * @param  string  $type
 * @param  string  $message
 * @return void
 */
public function __construct(AlertCreator $creator, $type, $message)
{
    $this->creator = $creator;
    $this->type = $type;
    $this->message = $message;
}

Administrar atributos

Ya hemos examinado cómo pasar atributos de datos a un componente; sin embargo, a veces es posible que deba especificar atributos HTML adicionales, como class, que no forman parte de los datos necesarios para que funcione un componente. Normalmente, desea pasar estos atributos adicionales al elemento raíz de la plantilla de componente. Por ejemplo, imagina que queremos renderizar un alert componente así:

<x-alert type="error" :message="$message" class="mt-4"/>

Todos los atributos que no forman parte del constructor del componente se agregarán automáticamente a la “bolsa de atributos” del componente. Esta bolsa de atributos se pone automáticamente a disposición del componente a través del $attributes variable. Todos los atributos se pueden representar dentro del componente repitiendo esta variable:

<div {{ $attributes }}>
    <!-- Component Content -->
</div>

Usando directivas como @env directamente en un componente no es compatible en este momento.

Atributos predeterminados / fusionados

A veces, es posible que deba especificar valores predeterminados para los atributos o fusionar valores adicionales en algunos de los atributos del componente. Para lograr esto, puede usar el atributo bag’s merge método:

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

Si asumimos que este componente se utiliza así:

<x-alert type="error" :message="$message" class="mb-4"/>

El HTML renderizado final del componente tendrá el siguiente aspecto:

<div class="alert alert-error mb-4">
    <!-- Contents of the $message variable -->
</div>

Fusión de atributos que no pertenecen a clases

Al fusionar atributos que no son class atributos, los valores proporcionados a la merge El método se considerará los valores “predeterminados” del atributo que el consumidor del componente puede sobrescribir. diferente a class atributos, los atributos que no son de clase no se añaden entre sí. Por ejemplo, un button El componente puede tener el siguiente aspecto:

<button {{ $attributes->merge(['type' => 'button']) }}>
    {{ $slot }}
</button>

Para renderizar el componente de botón con un personalizado type, se puede especificar al consumir el componente. Si no se especifica ningún tipo, el button se utilizará el tipo:

<x-button type="submit">
    Submit
</x-button>

El HTML renderizado del button componente en este ejemplo sería:

<button type="submit">
    Submit
</button>

Si desea un atributo que no sea class para tener sus valores adjuntos, puede utilizar el prepends método:

<div {{ $attributes->merge(['data-controller' => $attributes->prepends('profile-controller')]) }}>
    {{ $slot }}
</div>

Atributos de filtrado

Puede filtrar atributos usando el filter método. Este método acepta un cierre que debería devolver true si desea conservar el atributo en la bolsa de atributos:

{{ $attributes->filter(fn ($value, $key) => $key == 'foo') }}

Por conveniencia, puede utilizar el whereStartsWith método para recuperar todos los atributos cuyas claves comienzan con una cadena determinada:

{{ $attributes->whereStartsWith('wire:model') }}

Utilizando el first método, puede representar el primer atributo en una bolsa de atributos determinada:

{{ $attributes->whereStartsWith('wire:model')->first() }}

Ranuras

A menudo, necesitará pasar contenido adicional a su componente a través de “ranuras”. Imaginemos que un alert El componente que creamos tiene el siguiente marcado:

<!-- /resources/views/components/alert.blade.php -->

<div class="alert alert-danger">
    {{ $slot }}
</div>

Podemos pasar contenido al slot inyectando contenido en el componente:

<x-alert>
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

A veces, un componente puede necesitar renderizar múltiples ranuras diferentes en diferentes ubicaciones dentro del componente. Modifiquemos nuestro componente de alerta para permitir la inyección de un “título”:

<!-- /resources/views/components/alert.blade.php -->

<span class="alert-title">{{ $title }}</span>

<div class="alert alert-danger">
    {{ $slot }}
</div>

Puede definir el contenido de la ranura nombrada usando el x-slot etiqueta. Cualquier contenido que no esté dentro de un x-slot se pasará al componente en el $slot variable:

<x-alert>
    <x-slot name="title">
        Server Error
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

Ranuras con ámbito

Si ha utilizado un marco de JavaScript como Vue, es posible que esté familiarizado con las “ranuras con alcance”, que le permiten acceder a datos o métodos desde el componente dentro de su ranura. Puede lograr un comportamiento similar en Laravel definiendo métodos públicos o propiedades en su componente y accediendo al componente dentro de su ranura a través del $component variable:

<x-alert>
    <x-slot name="title">
        {{ $component->formatAlert('Server Error') }}
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

Vistas de componentes en línea

Para componentes muy pequeños, puede resultar engorroso administrar tanto la clase de componente como la plantilla de vista del componente. Por esta razón, puede devolver el marcado del componente directamente desde el render método:

/**
 * Get the view / contents that represent the component.
 *
 * @return IlluminateViewView|Closure|string
 */
public function render()
{
    return <<<'blade'
        <div class="alert alert-danger">
            {{ $slot }}
        </div>
    blade;
}

Generación de componentes de vista en línea

Para crear un componente que represente una vista en línea, puede usar el inline opción al ejecutar la make:component mando:

php artisan make:component Alert --inline

Componentes anónimos

Al igual que los componentes en línea, los componentes anónimos proporcionan un mecanismo para administrar un componente a través de un solo archivo. Sin embargo, los componentes anónimos utilizan un archivo de vista única y no tienen una clase asociada. Para definir un componente anónimo, solo necesita colocar una plantilla Blade dentro de su resources/views/components directorio. Por ejemplo, suponiendo que haya definido un componente en resources/views/components/alert.blade.php:

<x-alert/>

Puede utilizar el . carácter para indicar si un componente está anidado más profundamente dentro del components directorio. Por ejemplo, suponiendo que el componente se define en resources/views/components/inputs/button.blade.php, puedes renderizarlo así:

<x-inputs.button/>

Propiedades / atributos de datos

Dado que los componentes anónimos no tienen ninguna clase asociada, es posible que se pregunte cómo puede diferenciar qué datos deben pasarse al componente como variables y qué atributos deben colocarse en la bolsa de atributos del componente.

Puede especificar qué atributos deben considerarse variables de datos utilizando el @props directiva en la parte superior de la plantilla Blade de su componente. Todos los demás atributos del componente estarán disponibles a través de la bolsa de atributos del componente. Si desea dar un valor predeterminado a una variable de datos, puede especificar el nombre de la variable como clave de matriz y el valor predeterminado como valor de matriz:

<!-- /resources/views/components/alert.blade.php -->

@props(['type' => 'info', 'message'])

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

Componentes dinámicos

A veces, es posible que necesite renderizar un componente pero no saber qué componente debe renderizarse hasta el tiempo de ejecución. En esta situación, puede utilizar la función integrada de Laravel dynamic-component componente para representar el componente en función de un valor de tiempo de ejecución o una variable:

<x-dynamic-component :component="$componentName" class="mt-4" />

Incluyendo subvistas

Blade’s @include La directiva le permite incluir una vista Blade desde dentro de otra vista. Todas las variables que están disponibles para la vista principal estarán disponibles para la vista incluida:

<div>
    @include('shared.errors')

    <form>
        <!-- Form Contents -->
    </form>
</div>

Aunque la vista incluida heredará todos los datos disponibles en la vista principal, también puede pasar una matriz de datos adicionales a la vista incluida:

@include('view.name', ['some' => 'data'])

Si intentas @include una vista que no existe, Laravel arrojará un error. Si desea incluir una vista que puede estar presente o no, debe usar la @includeIf directiva:

@includeIf('view.name', ['some' => 'data'])

Si a ti te gustaría @include una vista si una expresión booleana dada se evalúa como true, puede utilizar el @includeWhen directiva:

@includeWhen($boolean, 'view.name', ['some' => 'data'])

Si a ti te gustaría @include una vista si una expresión booleana dada se evalúa como false, puede utilizar el @includeUnless directiva:

@includeUnless($boolean, 'view.name', ['some' => 'data'])

Para incluir la primera vista que existe desde una determinada matriz de vistas, puede utilizar la includeFirst directiva:

@includeFirst(['custom.admin', 'admin'], ['some' => 'data'])

Debe evitar usar el __DIR__ y __FILE__ constantes en sus vistas Blade, ya que se referirán a la ubicación de la vista compilada en caché.

Aliasing incluye

Si las inclusiones de Blade están almacenadas en un subdirectorio, es posible que desee asignarles un alias para facilitar el acceso. Por ejemplo, imagina una inclusión Blade almacenada en resources/views/includes/input.blade.php con el siguiente contenido:

<input type="{{ $type ?? 'text' }}">

Puede utilizar el include método para alias de la inclusión de includes.input para input. Normalmente, esto debe hacerse en el boot método de tu AppServiceProvider:

use IlluminateSupportFacadesBlade;

Blade::include('includes.input', 'input');

Una vez que se ha asignado un alias a la inclusión, puede renderizarla usando el nombre de alias como la directiva Blade:

@input(['type' => 'email'])

Representación de vistas para colecciones

Puede combinar bucles e incluye en una línea con Blade’s @each directiva:

@each('view.name', $jobs, 'job')

El primer argumento es la vista parcial a representar para cada elemento de la matriz o colección. El segundo argumento es la matriz o colección sobre la que desea iterar, mientras que el tercer argumento es el nombre de la variable que se asignará a la iteración actual dentro de la vista. Entonces, por ejemplo, si está iterando sobre una matriz de jobs, normalmente querrá acceder a cada trabajo como un job variable dentro de su vista parcial. La clave para la iteración actual estará disponible como key variable dentro de su vista parcial.

También puede pasar un cuarto argumento al @each directiva. Este argumento determina la vista que se renderizará si la matriz dada está vacía.

@each('view.name', $jobs, 'job', 'view.empty')

Vistas renderizadas a través de @each no herede las variables de la vista principal. Si la vista secundaria requiere estas variables, debe usar @foreach y @include en lugar de.

Pilas

Blade le permite empujar a pilas con nombre que se pueden renderizar en otro lugar en otra vista o diseño. Esto puede ser particularmente útil para especificar cualquier biblioteca de JavaScript requerida por sus vistas secundarias:

@push('scripts')
    <script src="/example.js"></script>
@endpush

Puede empujar a una pila tantas veces como sea necesario. Para representar el contenido completo de la pila, pase el nombre de la pila al @stack directiva:

<head>
    <!-- Head Contents -->

    @stack('scripts')
</head>

Si desea anteponer el contenido al comienzo de una pila, debe usar la @prepend directiva:

@push('scripts')
    This will be second...
@endpush

// Later...

@prepend('scripts')
    This will be first...
@endprepend

Inyección de servicio

los @inject La directiva se puede usar para recuperar un servicio del contenedor de servicios de Laravel. El primer argumento pasado a @inject es el nombre de la variable en la que se colocará el servicio, mientras que el segundo argumento es el nombre de la clase o interfaz del servicio que desea resolver:

@inject('metrics', 'AppServicesMetricsService')

<div>
    Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>

Hoja extensible

Blade le permite definir sus propias directivas personalizadas utilizando el directive método. Cuando el compilador Blade encuentra la directiva personalizada, llamará a la devolución de llamada proporcionada con la expresión que contiene la directiva.

El siguiente ejemplo crea un @datetime($var) directiva que formatea un determinado $var, que debería ser una instancia de DateTime:

<?php

namespace AppProviders;

use IlluminateSupportFacadesBlade;
use IlluminateSupportServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::directive('datetime', function ($expression) {
            return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
        });
    }
}

Como puede ver, encadenaremos el format método en cualquier expresión que se pase a la directiva. Entonces, en este ejemplo, el PHP final generado por esta directiva será:

<?php echo ($var)->format('m/d/Y H:i'); ?>

Después de actualizar la lógica de una directiva Blade, deberá eliminar todas las vistas Blade almacenadas en caché. Las vistas de Blade almacenadas en caché se pueden eliminar utilizando el view:clear Mando artesanal.

Declaraciones If personalizadas

La programación de una directiva personalizada es a veces más compleja de lo necesario al definir declaraciones condicionales personalizadas simples. Por esa razón, Blade proporciona una Blade::if método que le permite definir rápidamente directivas condicionales personalizadas utilizando Closures. Por ejemplo, definamos un condicional personalizado que verifique el proveedor de la nube de aplicaciones actual. Podemos hacer esto en el boot método de nuestro AppServiceProvider:

use IlluminateSupportFacadesBlade;

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    Blade::if('cloud', function ($provider) {
        return config('filesystems.default') === $provider;
    });
}

Una vez que se ha definido el condicional personalizado, podemos usarlo fácilmente en nuestras plantillas:

@cloud('digitalocean')
    // The application is using the digitalocean cloud provider...
@elsecloud('aws')
    // The application is using the aws provider...
@else
    // The application is not using the digitalocean or aws environment...
@endcloud

@unlesscloud('aws')
    // The application is not using the aws environment...
@endcloud