Що таке компоненти Laravel і як ними користуватися

Компоненти Laravel є розширеною функцією, яку додає сьома версія laravel. У цій статті ми побачимо, що таке компонент, як його створити, як використовувати компоненти в блейд-моделі та як параметризувати компонент шляхом передачі параметрів.

Що таке компонент Laravel?

Компонент — це фрагмент коду, який ми можемо повторно використовувати в будь-якому блейді шаблону. Це щось на зразок розділів, макетів і включень. Наприклад, ми використовуємо той самий заголовок для кожного шаблону, тож можемо створити компонент Header, який можна використовувати повторно.

Інше використання компонентів для кращого розуміння полягає в тому, що вам потрібно використовувати кнопку реєстрації на веб-сайті в багатьох місцях, наприклад у верхньому, нижньому колонтитулі чи будь-де на веб-сайті. Тож створіть компонент коду цієї кнопки та використовуйте його повторно.

Як створити компоненти в Laravel

Наприклад, давайте створимо компонент Header За допомогоюArtisan:

php artisan make:component Header

Ця команда створює два файли у вашому проекті laravel:

• файл PHP із назвою Header.php всередині каталогу app/http/View/Components;
• і HTML-файл леза з назвою header.blade.php всередині каталогу resources/views/components/.

Ви також можете створити компоненти в підкаталозі, наприклад:

php artisan make:component Forms/Button

Ця команда створить компонент кнопки в каталозі App\View\Components\Forms а файл леза буде розміщено в каталозі resources/views/components/forms.

Для візуалізації компонента у HTML-файлі блейду ми будемо використовувати цей синтаксис:

Приклад компонентів Laravel

Спочатку ми вставляємо HTML-код у файл header.blade.php компонента.

<div><h1> Header Component </h1></div>

тепер створіть файл перегляду users.blade.php у папці активів, де ми можемо використовувати компонент заголовка.

<x-header /><h1>User Page</h1>

тепер, через систему Маршрутизація laravel ми викликаємо blade для відображення результату в браузері

Як передати дані компонентам Laravel

Для передачі даних компоненту Blade використовується наступний синтаксис із зазначенням значення, пов’язаного з параметром всередині елемента HTML:

<x-header message=”Utenti” />

Наприклад, ми використали попередній компонент у файлі users.blade.php.

Ти повинен defiзавершіть дані компонента у файлі header.php. Усі загальнодоступні дані змінних були автоматично доступні для перегляду компонентів.

Додайте код у файл header.php у каталозі app/http/View/Components/ .

<?php

namespace App\View\Components;
use Illuminate\View\Component;

   class Header extends Component{

   /*** The alert type.** @var string*/

   public $title = "";

   public function __construct($message){

   $this->title = $message;

   }
}

Як бачите, метод конструктора класу встановлює змінну $title із значенням параметра, переданим компоненту. Тепер додайте змінну $title у файлі компонента header.blade.php щоб показати минулі дані.

<div> <h1> {{$title}}'s Header Component </h1> </div>

Тепер дані переданого компонента відображатимуться у браузері.

Так само ви можете використовувати цей компонент на іншій сторінці візуалізації з іншими даними, створивши інший файл візуалізації blade contact.blade.php і додайте нижче код компонента, щоб показати передані дані.

<x-header message=”Contact Us” />

У компоненті іноді потрібно вказати додаткові HTML-атрибути, наприклад назву класу CSS, ви можете додати його безпосередньо.

<x-header class=”styleDiv” />

Ercole Palmeri