Straipsniai

Kas yra Laravel komponentai ir kaip juos naudoti

„Laravel“ komponentai yra pažangi funkcija, kurią prideda septintoji „Laravel“ versija. Šiame straipsnyje apžvelgsime, kas yra komponentas, kaip jį sukurti, kaip naudoti komponentus blade modelyje ir kaip parametruoti komponentą perduodant parametrus.

Kas yra Laravel komponentas?

Komponentas yra kodo dalis, kurią galime pakartotinai naudoti bet kurioje šablono dalyje. Tai kažkas panašaus į skyrius, išdėstymus ir įtraukimus. Pavyzdžiui, kiekvienam šablonui naudojame tą pačią antraštę, todėl galime sukurti antraštės komponentą, kurį galime naudoti pakartotinai.

Kitas komponentų panaudojimas siekiant geresnio supratimo yra toks, kad reikia naudoti registracijos mygtuką svetainėje daugelyje vietų, pvz., antraštėje, poraštėje ar bet kur kitur svetainėje. Tada sukurkite to mygtuko kodo komponentą ir pakartotinai jį naudokite.

Kaip sukurti komponentus Laravel

Pavyzdžiui, sukurkime komponentą Header Su'Artisan:

php artisan make:component Header

Ši komanda sukuria du failus jūsų laravel projekte:

PHP failas su pavadinimu Header.php katalogo viduje app/http/View/Components;
ir HTML blade failą su pavadinimu header.blade.php katalogo viduje resources/views/components/.

Taip pat galite sukurti komponentus pakatalogyje, pavyzdžiui:

php artisan make:component Forms/Button

Ši komanda kataloge sukurs mygtuko komponentą App\View\Components\Forms ir „blade“ failas bus patalpintas į išteklių/vaizdų/komponentų/formų katalogą.

Norėdami pateikti komponentą HTML lapo faile, naudosime šią sintaksę:

Laravel komponentų pavyzdys

Pirmiausia į failą įterpiame HTML kodą header.blade.php komponento.

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

dabar sukurkite peržiūros failą users.blade.php išteklių aplanke, kur galime naudoti antraštės komponentą.

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

dabar per sistemą Maršrutas laravel, mes vadiname blade, kad naršyklėje būtų rodomas rezultatas

Kaip perduoti duomenis Laravel komponentams

Duomenims perduoti komponentui Blade naudojama ši sintaksė, nurodanti reikšmę, susijusią su parametru elemento viduje HTML:

<x-header message=”Utenti” />

Pavyzdžiui, faile users.blade.php naudojome ankstesnį komponentą.

Tu turėtum definish komponento duomenis header.php faile. Visi viešieji kintamųjų duomenys buvo automatiškai pasiekiami komponentų rodinyje.

Pridėkite kodą į failą header.php kataloge 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;

   }
}

Kaip matote, klasės konstruktoriaus metodas nustato kintamąjį $title su komponentui perduota parametro verte. Dabar pridėkite kintamąjį $title komponento faile header.blade.php parodyti praeities duomenis.

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

Dabar šie perduoti komponento duomenys bus rodomi naršyklėje.

Panašiai galite naudoti šį komponentą kitame vizualizacijos puslapyje su skirtingais duomenimis, sukurdami kitą vizualizacijos failą blade contact.blade.php ir toliau pridėkite komponento kodą, kad būtų rodomi perduoti duomenys.