Komponenty w Laravel Blade
W dzisiejszym artykule poruszymy bardzo ważną kwestię związaną z szablonami blade 
.
Albowiem posiadanie bardzo dobrze ułożonych szablonów, dobrej hierarchii i struktury pozwala nam na znaczne pozbawienie nas niezadowolenia, bólu głowy i mocne wykorzystanie potęgi re-używalności.
Ponieważ po to są komponenty . Re-używalne części, moduły które możemy używać w wielu miejscach - ale edytować w jednym .
Do używania komponentów gorąco zachęcam, a do dalszej lektury zapraszam !
Co to są komponenty?
Jak już wcześniej wspomniałem - re-używalne elementy/moduły/segmenty/fragmenty które możemy stosować w wielu miejscach - ale trzymać i edytować w jednym.
Jest to niezwykle ważny koncept. Niesie za sobą wiele zalet, ale przede wszystkim sęk w tej jednej najważniejszej - re-używalność. A co za tym idzie totalne zniszczenie redundancji w naszym kodzie .
Jak stosować komponenty za pomocą Blade'a?
Bardzo prosto. Otóż wystarczy zrobić dedykowany plik dla konkretnego komponentu (będziemy się do niego odwoływać po nazwie pliku), a następnie zamieścić tam wszelkie detale (szablon komponentu) i w wybranym miejscu wstawić odwołanie "{{ $slot }}".
Przykład:
<div class="alert alert-danger">
{{ $slot }}
</div>
W miejscu w którym jest "{{ $slot }}" zostanie wstrzyknięty kod, który podamy między wywołaniem naszego komponentu .
Przykład:
@component('alert')
<strong>Whoops!</strong> Something went wrong!
@endcomponent
Pomiędzy inwokacją komponentu a deklaracją jego zakończenia znajduje się kod. I to właśnie ten kod zostanie wstrzyknięty w miejsce slota w komponencie. A całość tego komponenta zostanie zwrócona z powrotem dokładnie to w miejsce .
W taki sposób pięknie wykorzystaliśmy komponent. Cudowna magia re-używalnego elementu. Elementu który może być teraz użyty literalnie wszędzie . A jego ciało - dynamicznie zmienione.
Czy można użyć większej ilości slotów?
Możliwe jest również zrobienie większej ilości slotów . Często jesteśmy w sytuacji kiedy jeden to za mało. Możemy tego dokonać za pomocą slotów z nazwą .
Przykład:
<div class="alert alert-danger">
<div class="alert-title">{{ $title }}</div>
{{ $slot }}
</div>
Mamy tutaj zdefiniowany slot nazwany "title" oraz slot bez nazwy (będzie użyty kiedy po prostu nie odniesiemy się do żadnego konkretnego slota wstawiając nasz kod).
Przykład:
@component('alert')
@slot('title')
Forbidden
@endslot
You are not allowed to access this resource!
@endcomponent
Kod który widzisz nie powinien być dla ciebie trudny w zrozumieniu . W miejsce slota "title" wstawiamy wartość Forbidden. Natomiast w miejsce naszego slota bez nazwy - to co jest poniżej (już nieobjętego ramami "@slot"
.
Wstrzykiwanie danych do komponentu
Jeszcze jedna rzecz o której należy wspomnieć a również bardzo ważna. Przekazywanie danych do naszych komponentów. Albowiem jest to możliwe i bardzo łatwo wykonywalne . Wystarczy przekazać wszelkie dane przy wywołaniu (odnoszeniu się) do naszego slota w szablonie .
Przykład:
@component('alert', ['foo' => 'bar'])
...
@endcomponent
Jak pewnie się domyślasz - do powyższego slota o nazwie "alert" przekazane zostaną dane za pomocą tablicy. Wynik będzie taki, że w obrębie tego komponentu mamy zmienną "foo" która równa się stringowi "bar". Tyle .
Podsumowując
Komponenty to niezwykle ważny koncept, z którego zalecam korzystać wszędzie tam gdzie jest to zasadne . Albowiem przynosi to nam re-używalność naszego kodu, niszczy redundancję i pozwala trzymać wszystko w ryzach (oraz w jednym centralnym miejscu).
Jeśli masz problemy z identyfikacją miejsca w którym zasadne jest stosowanie komponentu - patrz na miejsca, w którym powtarzasz jakikolwiek kod .
Kończąc
To wszystko w dzisiejszym artykule .
Zapraszam cię gorąco do komentowania oraz udostępniania . Przejrzyj proszę jeszcze inne moje artykuły, mogą cię zainteresować .
Dziękuję ci za lekturę i życzę dobrego dnia. Bywaj!