Laravel komponentlari nima va ulardan qanday foydalanish kerak

Laravel komponentlari laravelning ettinchi versiyasi tomonidan qo'shilgan rivojlangan xususiyatdir. Ushbu maqolada biz komponent nima ekanligini, uni qanday yaratishni, pichoq modelidagi komponentlardan qanday foydalanishni va parametrlarni o'tkazish orqali komponentni qanday parametrlashtirishni ko'rib chiqamiz.

Laravel komponenti nima?

Komponent - bu har qanday shablon panelida qayta foydalanishimiz mumkin bo'lgan kod qismidir. Bu bo'limlar, tartiblar va o'z ichiga oladi. Misol uchun, biz har bir shablon uchun bir xil sarlavhadan foydalanamiz, shuning uchun biz qayta foydalanishimiz mumkin bo'lgan Header komponentini yaratishimiz mumkin.

Yaxshiroq tushunish uchun komponentlardan yana bir foydalanish - veb-saytdagi ro'yxatdan o'tish tugmasidan ko'p joylarda, masalan, sarlavha, altbilgi yoki veb-saytning boshqa joylarida foydalanish kerak. Shunday qilib, ushbu tugma kodining tarkibiy qismini yarating va uni qayta ishlating.

Laravelda komponentlar qanday yaratiladi

Masalan, komponent yarataylik Header Bilan'Artisan:

php artisan make:component Header

Ushbu buyruq laravel loyihangizda ikkita fayl yaratadi:

• nomli PHP fayli Header.php katalog ichida app/http/View/Components;
• va nomi bilan HTML blade fayli header.blade.php katalog ichida resources/views/components/.

Siz shuningdek, quyi katalogda komponentlar yaratishingiz mumkin, masalan:

php artisan make:component Forms/Button

Bu buyruq katalogda tugma komponentini yaratadi App\View\Components\Forms va pichoq fayli resurslar/ko'rinishlar/komponentlar/formalar katalogiga joylashtiriladi.

Komponentni HTML blade faylida ko'rsatish uchun biz ushbu sintaksisdan foydalanamiz:

Laravel komponentlariga misol

Avval faylga HTML kodini kiritamiz header.blade.php komponentdan.

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

endi ko'rish faylini yarating users.blade.php sarlavha komponentidan foydalanishimiz mumkin bo'lgan aktivlar papkasida.

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

tizimi orqali marshrut laravel dan, natijani brauzerda ko'rsatish uchun pichoqni chaqiramiz

Laravel komponentlariga ma'lumotlarni qanday o'tkazish kerak

Komponentga ma'lumotlarni uzatish uchun Blade element ichidagi parametrga tegishli qiymatni ko'rsatuvchi quyidagi sintaksis qo'llaniladi HTML:

<x-header message=”Utenti” />

Misol uchun, biz users.blade.php faylida oldingi komponentdan foydalanganmiz.

Sen ... kerak defiheader.php faylidagi komponent ma'lumotlarini nish. Barcha umumiy o'zgaruvchilar ma'lumotlari komponent ko'rinishi uchun avtomatik ravishda mavjud edi.

Faylga kodni qo'shing app/http/View/Components/ katalogidagi header.php .

<?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;

   }
}

Ko'rib turganingizdek, sinfning konstruktor usuli o'zgaruvchini o'rnatadi $title komponentga o'tkazilgan parametr qiymati bilan. Endi o'zgaruvchini qo'shing $title komponent faylida header.blade.php o'tgan ma'lumotlarni ko'rsatish uchun.

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

Endi ushbu uzatilgan komponent ma'lumotlari brauzerda ko'rsatiladi.

Xuddi shunday, siz ushbu komponentdan boshqa vizualizatsiya faylini yaratish orqali turli ma'lumotlarga ega bo'lgan boshqa vizualizatsiya sahifasida foydalanishingiz mumkin blade contact.blade.php va uzatilgan ma'lumotlarni ko'rsatish uchun quyidagi komponent kodini qo'shing.

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

Komponentda ba'zan qo'shimcha HTML atributlarini ko'rsatishingiz kerak, masalan, CSS sinf nomi, uni to'g'ridan-to'g'ri qo'shishingiz mumkin.

<x-header class=”styleDiv” />

Ercole Palmeri