Статті

Що таке компоненти 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

Інноваційний бюлетень
Не пропустіть найважливіші новини про інновації. Підпишіться, щоб отримувати їх електронною поштою.
Ключові слова: рамкиLaravelPHP

Останні статті

Статистичні функції Excel: навчальний посібник із прикладами, частина перша

Excel надає широкий спектр статистичних функцій, які виконують обчислення від основного середнього значення, медіани та моди до розподілу…

Жовтень 1 2023

Зведені таблиці: що це таке, як створити в Excel і Google. Підручник з прикладами

Зведені таблиці — це метод аналізу електронних таблиць. Вони дозволяють абсолютно новачкові з нульовим досвідом...

30 вересня 2023

Проблема з авторським правом

Нижче наведено другу й останню статтю цього бюлетеня, присвячену зв’язку між конфіденційністю та авторським правом від…

30 вересня 2023

Інновації для електричної мобільності та розумних мереж: нові кальцієво-іонні батареї

Проект ACTEA, ENEA та Римський університет Сапієнца розроблятимуть нові кальцієво-іонні акумулятори. Нові кальцієво-іонні акумулятори як альтернатива…

30 вересня 2023

Основні моменти щорічної зустрічі AOFAS 2023 Ортопедичні дослідження та інновації

Понад 900 хірургів-ортопедів стопи та гомілковостопного суглоба, передових медичних працівників, лікарів-ортопедів та студентів-медиків відвідали...

28 вересня 2023

Бум робототехніки: лише у 2022 році по всьому світу було встановлено 531.000 35 роботів. Очікуване зростання на 2027% на рік до XNUMX року. ЗВІТ PROTOLABS

Згідно з останнім звітом Protolabs про робототехніку для виробництва, майже третина (32%) респондентів вважають, що в найближчі кілька років...

28 вересня 2023

CNH отримала нагороду Agritechnica Innovation Awards за свою технологію в галузі сільського господарства

CNH рішуче прагне розвивати свою технологію, щоб зробити сільське господарство простішим, ефективнішим і стійкішим для своїх…

27 вересня 2023

NTT і Qualcomm вирішили співпрацювати, щоб вийти за межі можливостей ШІ

Стратегічний крок сприятиме швидшому розвитку приватної екосистеми 5G для всіх цифрових пристроїв, повідомляє NTT...

27 вересня 2023

Neuralink розпочинає набір для першого клінічного випробування мозкового імплантату на людях

Neuralink, нейротехнологічний стартап, який належить Ілону Маску, нещодавно оголосив, що розпочне набір пацієнтів для свого…

26 вересня 2023

Privacy Loop: штучний інтелект у лабіринті конфіденційності та авторського права

Це перша з двох статей, у яких я розглядаю делікатний зв’язок між конфіденційністю та авторським правом, з одного боку,…

26 вересня 2023

Читайте Innovation своєю мовою

Інноваційний бюлетень
Не пропустіть найважливіші новини про інновації. Підпишіться, щоб отримувати їх електронною поштою.

Слідуйте за нами