X'inhuma l-komponenti Laravel u kif tużahom

Il-komponenti ta 'Laravel huma karatteristika avvanzata, li hija miżjuda mis-seba' verżjoni ta 'laravel. F'dan l-artikolu se naraw x'inhu komponent, kif toħloqha, kif tuża komponenti fil-mudell tax-xafra u kif tipparametrizza l-komponent billi tgħaddi l-parametri.

X'inhu Laravel Component?

Komponent huwa biċċa kodiċi li nistgħu nużaw mill-ġdid fi kwalunkwe xafra tal-mudell. Hija xi ħaġa bħal taqsimiet, taqsim, u tinkludi. Pereżempju, nużaw l-istess header għal kull mudell, sabiex inkunu nistgħu noħolqu komponent Header, li nistgħu nużaw mill-ġdid.

Użu ieħor ta 'komponenti għal fehim aħjar huwa bħal li għandek bżonn tuża buttuna ta' reġistru fuq il-websajt f'ħafna postijiet bħal fil-header, fil-footer jew fi kwalunkwe post ieħor fuq il-websajt. Allura oħloq komponent ta 'dak il-kodiċi tal-buttuna u użah mill-ġdid.

Kif toħloq komponenti f'Laravel

Per eżempju, ejja noħolqu komponent Header Bil-Artisan:

php artisan make:component Header

Dan il-kmand joħloq żewġ fajls fil-proġett laravel tiegħek:

• fajl PHP bl-isem Header.php ġewwa d-direttorju app/http/View/Components;
• u fajl xafra HTML bl-isem header.blade.php ġewwa d-direttorju resources/views/components/.

Tista' wkoll toħloq komponenti f'subdirettorju, bħal:

php artisan make:component Forms/Button

Dan il-kmand se joħloq komponent buttuna fid-direttorju App\View\Components\Forms u l-fajl tax-xafra se jitqiegħed fid-direttorju tar-riżorsi/veduti/komponenti/formoli.

Biex tirrendi l-komponent fil-fajl tax-xafra HTML, se nużaw din is-sintassi:

Eżempju ta 'komponenti Laravel

L-ewwel aħna daħħal xi kodiċi HTML fil-fajl header.blade.php tal-komponent.

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

issa oħloq fajl tal-vista users.blade.php fil-folder tal-assi, fejn nistgħu nużaw il-komponent tal-header.

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

issa, permezz tas-sistema ta routing ta laravel, insejħu x-xafra biex turi r-riżultat fil-browser

Kif tgħaddi d-dejta lill-komponenti Laravel

Biex tgħaddi d-dejta lill-komponent Blade tintuża s-sintassi li ġejja, li tispeċifika l-valur relatat mal-parametru ġewwa l-element HTML:

<x-header message=”Utenti” />

Pereżempju, użajna l-komponent preċedenti fil-fajl users.blade.php.

Imissek definish id-data tal-komponent fil-fajl header.php. Id-dejta varjabbli pubblika kollha kienet disponibbli awtomatikament għall-vista tal-komponent.

Żid il-kodiċi fil-fajl header.php ġewwa app/http/View/Components/ direttorju .

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

   }
}

Kif tistgħu taraw, il-metodu tal-kostruttur tal-klassi jistabbilixxi l-varjabbli $title bil-valur tal-parametru mgħoddi lill-komponent. Issa żid il-varjabbli $title fil-fajl tal-komponenti header.blade.php biex turi dejta tal-passat.

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

Issa din id-dejta tal-komponent trażmessa se tintwera fil-browser.

Bl-istess mod, tista 'tuża dan il-komponent fuq paġna ta' viżwalizzazzjoni oħra b'dejta differenti, billi toħloq fajl ieħor ta 'viżwalizzazzjoni blade contact.blade.php u żid taħt il-kodiċi tal-komponent biex turi d-dejta mgħoddija.

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

Fil-komponent, xi drabi għandek bżonn tispeċifika attributi HTML addizzjonali, bħall-isem tal-klassi CSS, tista 'żżidha direttament.

<x-header class=”styleDiv” />

Ercole Palmeri