Artiklid

Mis on Laraveli komponendid ja kuidas neid kasutada

Laraveli komponendid on täiustatud funktsioon, mille lisab laraveli seitsmes versioon. Selles artiklis vaatleme, mis komponent on, kuidas seda luua, kuidas komponente blade mudelis kasutada ja kuidas komponenti parameetrite edastamise teel parameeterstada.

Mis on Laraveli komponent?

Komponent on kooditükk, mida saame uuesti kasutada mis tahes mallilabas. See on midagi sellist nagu jaotised, paigutused ja lisad. Näiteks kasutame iga malli jaoks sama päist, nii et saame luua päise komponendi, mida saame uuesti kasutada.

Teine komponentide kasutamine paremaks mõistmiseks on see, et peate veebisaidil paljudes kohtades kasutama registreerimisnuppu, näiteks päises, jaluses või mujal veebisaidil. Seega looge selle nupu koodi komponent ja kasutage seda uuesti.

Kuidas Laravelis komponente luua

Näiteks loome komponendi Header Koos'Artisan:

php artisan make:component Header

See käsk loob teie laraveli projektis kaks faili:

nimega PHP-fail Header.php kataloogi sees app/http/View/Components;
ja nimega HTML-i terafail header.blade.php kataloogi sees resources/views/components/.

Samuti saate luua komponente alamkataloogis, näiteks:

php artisan make:component Forms/Button

See käsk loob kataloogis nupukomponendi App\View\Components\Forms ja blade fail paigutatakse kataloogi ressursid/vaated/komponendid/vormid.

Komponendi renderdamiseks HTML-i terafailis kasutame järgmist süntaksit:

Laraveli komponentide näide

Esmalt sisestame faili HTML-koodi header.blade.php komponendist.

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

looge nüüd vaatefail users.blade.php varade kaustas, kus saame kasutada päise komponenti.

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

nüüd süsteemi kaudu Marsruutimine laraveli puhul kutsume blade'i, et kuvada tulemus brauseris

Kuidas edastada andmeid Laraveli komponentidele

Andmete edastamiseks komponendile Blade kasutatakse järgmist süntaksit, mis määrab elemendi sees oleva parameetriga seotud väärtuse HTML:

<x-header message=”Utenti” />

Näiteks kasutasime failis users.blade.php eelmist komponenti.

Sa peaksid definish komponendi andmed faili header.php. Kõik avalikud muutujate andmed olid komponentvaate jaoks automaatselt saadaval.

Lisage faili kood header.php kataloogis 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;

   }
}

Nagu näete, määrab klassi konstruktori meetod muutuja $title komponendile edastatud parameetri väärtusega. Nüüd lisage muutuja $title komponendi failis header.blade.php varasemate andmete näitamiseks.

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

Nüüd kuvatakse need edastatud komponendi andmed brauseris.

Samamoodi saate seda komponenti kasutada muul visualiseerimislehel erinevate andmetega, luues teise visualiseerimisfaili blade contact.blade.php ja lisage läbitud andmete kuvamiseks allpool komponendi kood.