Laravel Blade Component ve Slot Kullanımı Rehberi

Bir Laravel Blade component, arayüzünüzün tekrar eden parçalarını tek bir yerde toplayıp her sayfada yeniden kullanmanıza olanak tanır. Buton, kart, uyarı kutusu ya da modal gibi yapıları kopyala-yapıştır ile çoğaltmak yerine, bir bileşen olarak tanımlar; props ile veriyi dışarıdan verir, slot ile içeriği esnek bırakırsınız. Bu yazıda Blade bileşenlerini sıfırdan kurmayı, anonim ve sınıf tabanlı bileşenleri, props ile slot mantığını ve gerçek projelerde işinize yarayacak ipuçlarını adım adım ele alıyorum.

Blade bileşeni nedir, neden kullanılır?

Blade, Laravel'in şablon motorudur. Component'ler ise bu şablonların yeniden kullanılabilir, kendi içinde kapalı parçalarıdır. Bir bileşen iki kısımdan oluşur: dışarıdan kullanılan etiket (örneğin <x-alert />) ve onun karşılığı olan Blade dosyası. Avantajları net:

• Tekrarı azaltır: Aynı kart yapısını on sayfada tekrar yazmazsınız.
• Bakımı kolaylaştırır: Tasarım değişince tek dosyayı düzenlersiniz.
• Okunabilirlik sağlar: Sayfa şablonu, anlamlı etiketlerden oluşur.
• Test edilebilirlik: Bileşenleri ayrı ayrı doğrulayabilirsiniz.

İlk bileşeni oluşturmak

Artisan komutuyla bir bileşen oluşturmak en hızlı yoldur. Aşağıdaki komut hem sınıf hem de görünüm dosyasını üretir:

php artisan make:component Alert

Bu komut iki dosya oluşturur: app/View/Components/Alert.php (bileşen sınıfı) ve resources/views/components/alert.blade.php (görünüm). Bileşeni sayfada kullanmak için x- öneki ile etiketini yazarsınız:

<x-alert />

Klasör yapısını yansıtmak için nokta yerine ayraç kullanılır. Örneğin resources/views/components/forms/input.blade.php dosyası <x-forms.input /> olarak çağrılır.

Props ile veri geçirmek

Bileşenler genellikle dışarıdan veri alır. Bunun için sınıf tabanlı bileşende constructor parametreleri tanımlanır. Aşağıdaki örnekte type ve message birer prop'tur:

<?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');
    }
}

Görünüm dosyasında bu özelliklere doğrudan erişirsiniz:

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

Kullanırken prop'ları HTML özniteliği gibi geçirirsiniz. Sabit değerler için normal öznitelik, değişken için : öneki kullanılır:

<x-alert type="danger" message="Kayıt silindi." />
<x-alert type="success" :message="$bildirim" />

Öznitelik adları otomatik olarak camelCase'e çevrilir: HTML'de card-title yazarsanız, sınıfta $cardTitle olarak alırsınız.

Slot ile içeriği esnek bırakmak

Props basit değerler için idealdir; ancak bileşenin içine HTML, başka bileşenler veya uzun metin koymak isterseniz slot kullanırsınız. Açma ve kapama etiketleri arasındaki her şey, görünümde {{ $slot }} değişkenine düşer:

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

<x-card>
    <p>Bu metin doğrudan slot'a yerleşir.</p>
</x-card>

İsimlendirilmiş slot'lar

Çoğu bileşenin birden fazla içerik bölgesi vardır: başlık, gövde, alt kısım gibi. Bunun için isimlendirilmiş slot tanımlarsınız. Görünümde her bölgeyi ayrı bir değişkenle işaretlersiniz:

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

Kullanırken <x-slot:title> ile o bölgeyi doldurursunuz; isimsiz içerik varsayılan $slot'a gider:

<x-card>
    <x-slot:title>
        Aylık Rapor
    </x-slot>

    <p>Asıl içerik buraya gelir.</p>
</x-card>

Anonim bileşenler ve attributes

Her bileşen için bir sınıf yazmak şart değildir. Yalnızca görünümden ibaret olan, basit yapılar için anonim bileşen yeterlidir: sadece resources/views/components/ altında bir Blade dosyası oluşturursunuz, sınıf gerekmez. Prop'ları dosyanın başında tanımlarsınız:

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

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

Tanımlanmayan tüm öznitelikler $attributes torbasında toplanır. Bunları kök elemana aktarmak, hatta sınıfları akıllıca birleştirmek mümkündür:

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

Böylece <x-badge class="ml-2" id="rol"> yazdığınızda hem mevcut badge sınıfı korunur hem de dışarıdan gelen ml-2 ve id eklenir. Bu yaklaşım bileşenleri çok daha esnek kılar.

Pratikte iyi alışkanlıklar

• Sık değişmeyen, içeriği basit bileşenleri anonim tutun; mantık (veri çekme, hesaplama) gerekiyorsa sınıf tabanlı seçin.
• Prop adlarını açık ve tutarlı verin; varsayılan değer tanımlayarak hatalı kullanımı azaltın.
• $attributes->merge() ile esneklik bırakın, ama kritik sınıfları sabit tutun.
• Çok büyük bileşenleri parçalayın; her bileşen tek bir işi iyi yapsın.

Sık Sorulan Sorular

Anonim bileşen mi sınıf tabanlı bileşen mi kullanmalıyım?

İçerik tamamen görünümden ibaretse ve PHP mantığı gerekmiyorsa anonim bileşen daha sade ve hızlıdır. Veriyi işlemek, servis çağırmak veya hesaplama yapmak gerekiyorsa sınıf tabanlı bileşen tercih edin.

Props ile slot arasındaki fark nedir?

Props, dışarıdan basit değerler (metin, sayı, boolean) geçirmek içindir ve öznitelik olarak yazılır. Slot ise bileşenin içine HTML ya da başka bileşenler yerleştirmenizi sağlar; açma ve kapama etiketleri arasına yazılır.

Bileşen etiketi neden çalışmıyor?

En sık nedenler: dosyanın resources/views/components/ altında olmaması, isimlendirmenin uyuşmaması veya view cache'inin eski olmasıdır. php artisan view:clear komutuyla önbelleği temizleyin ve dosya yolunu etiketle karşılaştırın.

Projende temiz, yeniden kullanılabilir bir arayüz katmanı mı kurmak istiyorsun? Laravel ve Blade ile bakımı kolay, ölçeklenebilir uygulamalar geliştiriyorum. Fikrini konuşmak için benimle iletişime geç.