Laravel Blade Components

Componets – Aus VueJS kennen wir es und haben es bereits lieben gelernt. In Laravel können wir im Blade auch sehr dynamisch in Componenten arbeiten. Von Hause gibt uns Laravel Componets mit.

Am Beispiel erklärt

Stellen wir uns vor, wir wollen ein Blog erstellen. In der Übersichtsseite, sollen die Blogartikel untereinander gelistet werden. Wer ohne Componets gerabeitet hatte, wird in einer @foreach Schleife die Artikel ausgelesen haben und innerhalb der Blade Direktive @foreach ein HTML Block befüllt haben. In etwas so:

@foreach ($posts as $post)
  <div>
    <h1>$post->title</h1>
    <p>$post->description</p>
  </div>
@endforeach 

Wir können nun aber auch:

<x-postListing :posts=”$posts”/> 

schreiben.

Jetzt wird die Componente PostListing aufgerufen und die Posts Collection wird mit übergeben. Dafür legen wir die Componente PostListing mal an.

php artisan make:component PostListing 

Laravel Artisan legt uns zwei Dateien an.

1. app/View/Components/PostListing.php

2. views/components/postListing.blade.php

1. app/View/Components/PostListing.php

 use Illuminate\View\Component;
 
 
 class Card extends Component
 {
      * Create a new component instance.
      *
      * @return void
      */
     public function __construct()
     {}
 
 
     /**
      * Get the view / contents that represent the component.
      *
      * @return \Illuminate\Contracts\View\View|\Closure|string
      */
     public function render()
     {
         return view('components.card');
     }
 } 

2. views/components/postListing.blade.php

<div>
     <!-- Knowing is not enough; we must apply. Being willing is not enough; we must do. - Leonardo  
</div>

Nun müssen wir der Componente erklären, dass sie den Parameter posts erhalten wird. Das geschieht im Constructor der Klasse.

public function __construct($post)
{
  $this->post = $post;
} 

Und ab jetzt ist die Varaible ibn der PostListing Blade auch verfügbar. Deshalb können wir die Collection mit einer Foreach durchlaufen lassen. Also fügen wir in unsere Blade ein:

@foreach ($posts as $post)
 {{$post}}
 <x-posts :posts=”$post”/>
@endforeach

Nun können wir das ganze noch weiter gehen. Ich meine damit das wir eine weitere Componente dem ganzen hinzufügen. Und zwar die Componente Card. Jeder Post soll in einer Card im Listing dargestellt werden. Damit würden wir ein Grundstein für eine saubere Blade / View Architektur unser App legen. Zum Beispiel könnten wir mehre Carddesigns besitzen und diese werden im PostLinsting getriggert.