Artikoloj

Kio estas Laravel-komponentoj kaj kiel uzi ilin

Laravel-komponentoj estas altnivela trajto, kiu estas aldonita per la sepa versio de laravel. En ĉi tiu artikolo ni vidos, kio estas komponanto, kiel krei ĝin, kiel uzi komponantojn en la klingomodelo kaj kiel parametrigi la komponanton per pasado de parametroj.

Kio estas Laravel Component?

Komponanto estas peco de kodo, kiun ni povas reuzi en iu ajn ŝablonklingo. Ĝi estas io kiel sekcioj, aranĝoj kaj inkluzivas. Ekzemple, ni uzas la saman kaplinion por ĉiu ŝablono, do ni povas krei Header-komponenton, kiun ni povas reuzi.

Alia uzo de komponantoj por pli bona kompreno estas kiel vi devas uzi registri butonon en retejo en multaj lokoj kiel en kaplinio, piedlinio aŭ ie ajn en retejo.Do kreu komponanton de tiu butonkodo kaj reuzu ĝin.

Kiel krei komponantojn en Laravel

Ekzemple, ni kreu komponanton Header Kun la 'Artisan:

php artisan make:component Header

Ĉi tiu komando kreas du dosierojn en via laravel-projekto:

PHP-dosiero kun la nomo Header.php ene de la dosierujo app/http/View/Components;
kaj HTML-klingo-dosiero kun la nomo header.blade.php ene de la dosierujo resources/views/components/.

Vi ankaŭ povas krei komponantojn en subdosierujo, kiel:

php artisan make:component Forms/Button

Ĉi tiu komando kreos butonkomponenton en la dosierujo App\View\Components\Forms kaj la klingodosiero estos metita en la dosierujon resources/views/components/forms.

Por bildi la komponanton en la HTML-klingo-dosiero, ni uzos ĉi tiun sintakson:

Ekzemplo de Laravel-komponentoj

Unue ni enmetas iom da HTML-kodo en la dosieron header.blade.php de la komponanto.

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

nun kreu viddosieron users.blade.php en la dosierujo de aktivoj, kie ni povas uzi la kaplinian komponanton.

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

nun, per la sistemo de enirado de laravel, ni vokas la klingon por montri la rezulton en la retumilo

Kiel transdoni datumojn al Laravel-komponentoj

Transdoni datumojn al la komponanto Blade la sekva sintakso estas uzata, precizigante la valoron rilatan al la parametro ene de la elemento HTML:

<x-header message=”Utenti” />

Ekzemple, ni uzis la antaŭan komponanton en la dosiero users.blade.php.

Vi devus defifini la komponan datumon en la header.php dosiero. Ĉiuj publikaj variaj datumoj estis aŭtomate disponeblaj por la kompona vido.

Aldonu la kodon en la dosiero header.php en la dosierujo 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;

   }
}

Kiel vi povas vidi, la konstrua metodo de la klaso fiksas la variablon $title kun la parametrovaloro pasita al la komponanto. Nun aldonu la variablon $title en la kompona dosiero header.blade.php por montri pasintajn datumojn.

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

Nun ĉi tiuj transdonitaj komponentaj datumoj estos montritaj en la retumilo.

Simile, vi povas uzi ĉi tiun komponanton sur alia bildiga paĝo kun malsamaj datumoj, kreante alian bildigan dosieron blade contact.blade.php kaj aldonu sube kodon por montri preterpasitajn datumojn.