Ndezvipi zvikamu zveLaravel uye maitiro ekuzvishandisa

Zvikamu zveLaravel chinhu chepamberi, icho chinowedzerwa neiyo yechinomwe vhezheni yelaravel. Muchinyorwa chino tichaona kuti chii chinonzi chikamu, nzira yekuchigadzira, mashandisiro ezvikamu mumhando yeblade uye maitiro ekuita parameterize chikamu nekupfuura paramita.

Chii chinonzi Laravel Component?

Chikamu chikamu chekodhi chatinogona kushandisa zvakare mune chero template blade. Icho chinhu chakaita sezvikamu, marongero, uye zvinosanganisira. Semuenzaniso, isu tinoshandisa musoro wakafanana kune yega template, saka tinokwanisa kugadzira Musoro chikamu, chatinogona kushandisa zvakare.

Kumwe kushandiswa kwezvikamu kuti unzwisise zviri nani kwakafanana nekushandisa bhatani rerejista pawebhusaiti munzvimbo dzakawanda semumusoro, muzasi kana kupi zvako pawebhusaiti.Saka gadzira chikamu cheiyo bhatani kodhi woishandisa zvakare.

Maitiro ekugadzira zvikamu muLaravel

Semuenzaniso, ngatigadzire chikamu Header Ne 'Artisan:

php artisan make:component Header

Uyu murairo unogadzira mafaera maviri mune yako laravel purojekiti:

• PHP faira rine zita Header.php mukati medhairekitori app/http/View/Components;
• uye HTML blade faira ine zita header.blade.php mukati medhairekitori resources/views/components/.

Iwe unogona zvakare kugadzira zvikamu mune subdirectory, senge:

php artisan make:component Forms/Button

Uyu murairo uchagadzira chikamu chebhatani mudhairekitori App\View\Components\Forms uye iyo blade faira ichaiswa mune zviwanikwa / maonero / zvikamu / mafomu dhairekitori.

Pakupa chikamu muHTML blade faira, isu tichashandisa iyi syntax:

Muenzaniso weLaravel zvikamu

Kutanga tinoisa imwe HTML kodhi mufaira header.blade.php chechikamu.

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

ikozvino gadzira faira rekuona users.blade.php mufodhi yemidziyo, kwatinogona kushandisa chikamu chemusoro.

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

ikozvino, kuburikidza nehurongwa hwe routing yelaravel, tinodaidza blade kuratidza mhedzisiro mubrowser

Maitiro ekupfuudza data kune Laravel zvikamu

Kuendesa data kune chikamu Blade iyo inotevera syntax inoshandiswa, ichitsanangura kukosha kwakabatana neparameter mukati mechinhu HTML:

<x-header message=”Utenti” />

Semuenzaniso, takashandisa chikamu chekare muusers.blade.php file.

Unofanira definish chikamu che data muheader.php file. Yese data yakasiyana-siyana yeruzhinji yaiwanikwa otomatiki pakuona kwechikamu.

Wedzera kodhi mufaira header.php mukati meapp/http/View/Components/dhairekitori .

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

   }
}

Sezvauri kuona, muvaki nzira yekirasi inoisa chinja $title neiyo parameter kukosha yakapfuudzwa kune chikamu. Zvino wedzera shanduko $title muchikamu faira header.blade.php kuratidza data yapfuura.

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

Iye zvino iyi data yechikamu inofambiswa icharatidzwa mubrowser.

Saizvozvowo, unogona kushandisa chikamu ichi pane imwe peji yekuona ine data yakasiyana, nekugadzira imwe faira yekuona blade contact.blade.php uye wedzera pazasi chikamu kodhi kuratidza yapfuura data.

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

Muchikamu, dzimwe nguva unoda kutsanangura humwe hunhu hweHTML, senge CSS kirasi zita, unogona kuiwedzera zvakananga.

<x-header class=”styleDiv” />

Ercole Palmeri