Компоненти Laravel є розширеною функцією, яку додає сьома версія laravel. У цій статті ми побачимо, що таке компонент, як його створити, як використовувати компоненти в блейд-моделі та як параметризувати компонент шляхом передачі параметрів.
Компонент — це фрагмент коду, який ми можемо повторно використовувати в будь-якому блейді шаблону. Це щось на зразок розділів, макетів і включень. Наприклад, ми використовуємо той самий заголовок для кожного шаблону, тож можемо створити компонент Header, який можна використовувати повторно.
Інше використання компонентів для кращого розуміння полягає в тому, що вам потрібно використовувати кнопку реєстрації на веб-сайті в багатьох місцях, наприклад у верхньому, нижньому колонтитулі чи будь-де на веб-сайті. Тож створіть компонент коду цієї кнопки та використовуйте його повторно.
Наприклад, давайте створимо компонент Header
За допомогоюArtisan
:
php artisan make:component Header
Ця команда створює два файли у вашому проекті laravel:
Header.php
всередині каталогу app/http/View/Components
;header.blade.php
всередині каталогу resources/views/components/
.Ви також можете створити компоненти в підкаталозі, наприклад:
php artisan make:component Forms/Button
Ця команда створить компонент кнопки в каталозі App\View\Components\Forms
а файл леза буде розміщено в каталозі resources/views/components/forms.
Для візуалізації компонента у HTML-файлі блейду ми будемо використовувати цей синтаксис:
Спочатку ми вставляємо HTML-код у файл header.blade.php
компонента.
<div><h1> Header Component </h1></div>
тепер створіть файл перегляду users.blade.php
у папці активів, де ми можемо використовувати компонент заголовка.
<x-header /><h1>User Page</h1>
тепер, через систему Маршрутизація laravel ми викликаємо blade для відображення результату в браузері
Для передачі даних компоненту 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
У поліклініці Катанії проведено операцію офтальмопластики за допомогою комерційного переглядача Apple Vision Pro…
Розвиток дрібної моторики за допомогою розфарбовування готує дітей до більш складних навичок, таких як письмо. Розфарбувати…
Військово-морський сектор є справжньою глобальною економічною силою, яка просунулася до 150-мільярдного ринку...
Минулого понеділка Financial Times оголосила про угоду з OpenAI. FT ліцензує свою журналістику світового рівня…