Laravel Blade Component en slots: praktische gids

Met een Laravel Blade component kun je de terugkerende delen van je interface op één plek vastleggen en op elke pagina hergebruiken. In plaats van structuren zoals knoppen, kaarten, meldingen of modals te kopiëren en plakken, definieer je ze als componenten: je geeft data door via props en houdt de inhoud flexibel met slots. In deze gids loop ik stap voor stap door het bouwen van Blade-componenten vanaf nul, het verschil tussen anonieme en class-gebaseerde componenten, hoe props en slots samenwerken, en praktische tips die je echt gebruikt in echte projecten.

Wat is een Blade-component en waarom gebruik je het?

Blade is de template-engine van Laravel, en componenten zijn de herbruikbare, op zichzelf staande onderdelen ervan. Een component bestaat uit twee delen: de tag die je van buitenaf gebruikt (bijvoorbeeld <x-alert />) en het Blade-bestand erachter. De voordelen zijn duidelijk:

• Minder herhaling: je schrijft niet dezelfde kaart op tien pagina's opnieuw.
• Eenvoudiger onderhoud: als het ontwerp verandert, pas je één bestand aan.
• Betere leesbaarheid: de paginatemplate bestaat uit betekenisvolle tags.
• Testbaarheid: je kunt componenten afzonderlijk verifiëren.

Je eerste component maken

De snelste manier om een component op te zetten is met Artisan. Het onderstaande commando genereert zowel een class als een view-bestand:

php artisan make:component Alert

Dit maakt twee bestanden aan: app/View/Components/Alert.php (de component-class) en resources/views/components/alert.blade.php (de view). Om de component op een pagina te gebruiken, schrijf je de tag met het voorvoegsel x-:

<x-alert />

De mapstructuur wordt weergegeven met een scheidingsteken. Het bestand resources/views/components/forms/input.blade.php roep je bijvoorbeeld aan als <x-forms.input />.

Data doorgeven met props

Componenten ontvangen meestal data van buitenaf. In een class-gebaseerde component definieer je dit via de parameters van de constructor. In het onderstaande voorbeeld zijn type en message props:

<?php

namespace App\View\Components;

use Illuminate\View\Component;
use Illuminate\View\View;

class Alert extends Component
{
    public function __construct(
        public string $type = 'info',
        public string $message = '',
    ) {}

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

In het view-bestand benader je deze eigenschappen direct:

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

Bij gebruik geef je de props door als HTML-attributen. Gebruik een gewoon attribuut voor statische waarden en het voorvoegsel : voor variabelen:

<x-alert type="danger" message="Record verwijderd." />
<x-alert type="success" :message="$notice" />

Attribuutnamen worden automatisch omgezet naar camelCase: schrijf je card-title in HTML, dan ontvang je het als $cardTitle in de class.

Inhoud flexibel houden met slots

Props zijn ideaal voor eenvoudige waarden, maar als je HTML, andere componenten of langere tekst in een component wilt plaatsen, gebruik je een slot. Alles tussen de openings- en sluitingstags belandt in de variabele {{ $slot }} in de view:

<!-- components/card.blade.php -->
<div class="card">
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

<x-card>
    <p>Deze tekst wordt direct in de slot geplaatst.</p>
</x-card>

Benoemde slots

De meeste componenten hebben meer dan één inhoudsgebied: een kop, een body, een voettekst. Hiervoor definieer je benoemde slots. In de view markeer je elk gebied met een eigen variabele:

<!-- components/card.blade.php -->
<div class="card">
    <div class="card-header">{{ $title }}</div>
    <div class="card-body">{{ $slot }}</div>
</div>

Bij gebruik vul je dat gebied met <x-slot:title>; alle naamloze inhoud gaat naar de standaard $slot:

<x-card>
    <x-slot:title>
        Maandrapport
    </x-slot>

    <p>De hoofdinhoud komt hier.</p>
</x-card>

Anonieme componenten en attributes

Je hoeft niet voor elke component een class te schrijven. Voor eenvoudige, alleen-view-structuren volstaat een anonieme component: je maakt simpelweg een Blade-bestand onder resources/views/components/, zonder class. Je declareert props bovenaan het bestand:

<!-- components/badge.blade.php -->
@props(['color' => 'gray'])

<span class="badge badge-{{ $color }}">
    {{ $slot }}
</span>

Elk attribuut dat je niet hebt gedeclareerd, wordt verzameld in de $attributes-bag. Je kunt deze doorgeven aan het root-element en zelfs classes intelligent samenvoegen:

<span {{ $attributes->merge(['class' => 'badge']) }}>
    {{ $slot }}
</span>

Als je dus <x-badge class="ml-2" id="role"> schrijft, blijft de bestaande badge-class behouden en worden de binnenkomende ml-2 en id toegevoegd. Deze aanpak maakt componenten veel flexibeler.

Goede gewoontes in de praktijk

• Houd componenten die zelden veranderen en eenvoudige inhoud hebben anoniem; kies class-gebaseerd wanneer je logica nodig hebt (data ophalen, berekenen).
• Geef props duidelijke, consistente namen; definieer standaardwaarden om verkeerd gebruik te beperken.
• Laat ruimte voor flexibiliteit met $attributes->merge(), maar houd kritieke classes vast.
• Splits zeer grote componenten op; elke component moet één taak goed doen.

Veelgestelde vragen

Moet ik een anonieme of een class-gebaseerde component gebruiken?

Als de inhoud puur een view is en geen PHP-logica nodig heeft, is een anonieme component eenvoudiger en sneller. Als je data moet verwerken, een service moet aanroepen of berekeningen moet doen, kies dan een class-gebaseerde component.

Wat is het verschil tussen props en slots?

Props zijn bedoeld om eenvoudige waarden (tekst, getallen, booleans) van buitenaf door te geven en worden als attributen geschreven. Een slot stelt je in staat HTML of andere componenten in de component te plaatsen; het staat tussen de openings- en sluitingstags.

Waarom werkt mijn component-tag niet?

De meest voorkomende oorzaken zijn: het bestand staat niet onder resources/views/components/, een verkeerde naamgeving, of een verouderde view-cache. Wis de cache met php artisan view:clear en vergelijk het bestandspad met de tag.

Wil je een schone, herbruikbare UI-laag in je project bouwen? Ik ontwikkel onderhoudbare, schaalbare applicaties met Laravel en Blade. Om je idee te bespreken, neem contact met me op.