Naon komponén Laravel sareng kumaha ngagunakeunana

Komponén Laravel mangrupikeun fitur canggih, anu ditambah ku versi katujuh laravel. Dina artikel ieu kami baris nempo naon komponén, kumaha carana nyieun eta, kumaha carana make komponén dina modél sabeulah sarta kumaha carana parameterize komponén ku ngalirkeun parameter.

Naon Komponén Laravel?

Komponén nyaéta sapotong kode anu urang tiasa dianggo deui dina sabeulah template. Éta sapertos bagian, perenah, sareng kalebet. Contona, urang make lulugu sarua keur unggal template, sangkan bisa nyieun komponén lulugu, nu bisa dipaké deui.

Pamakéan komponén séjén pikeun pamahaman anu langkung saé sapertos anjeun kedah nganggo tombol register dina halaman wéb di seueur tempat sapertos dina header, footer atanapi dimana waé dina halaman wéb.

Kumaha cara nyiptakeun komponén dina Laravel

Contona, hayu urang nyieun komponén Header Jeung'Artisan:

php artisan make:component Header

Paréntah ieu nyiptakeun dua file dina proyék laravel anjeun:

• file PHP jeung ngaran Header.php jero diréktori app/http/View/Components;
• sareng file sabeulah HTML sareng nami header.blade.php jero diréktori resources/views/components/.

Anjeun ogé tiasa nyiptakeun komponén dina subdirektori, sapertos:

php artisan make:component Forms/Button

Paréntah ieu bakal nyiptakeun komponén tombol dina diréktori App\View\Components\Forms jeung file sabeulah bakal ditempatkeun dina sumberdaya / pintonan / komponén / diréktori formulir.

Pikeun rendering komponén dina file HTML sabeulah, urang bakal ngagunakeun sintaksis ieu:

Conto komponén Laravel

Mimiti urang nyelapkeun sababaraha kode HTML kana file header.blade.php tina komponén.

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

ayeuna jieun file view users.blade.php dina folder aset, dimana urang tiasa nganggo komponén lulugu.

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

ayeuna, ngaliwatan sistem tina routing tina laravel, urang nelepon sabeulah pikeun mintonkeun hasil dina browser nu

Kumaha ngalirkeun data kana komponén Laravel

Pikeun ngalirkeun data kana komponén Blade sintaksis di handap ieu dipaké, nangtukeun nilai nu patali jeung parameter di jero unsur HTML:

<x-header message=”Utenti” />

Contona, urang ngagunakeun komponén saméméhna dina file users.blade.php.

Anjeun kedah definish data komponén dina file header.php. Sadaya data variabel umum sacara otomatis sayogi pikeun tampilan komponén.

Tambahkeun kode dina file header.php jero diréktori 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;

   }
}

Sakumaha anjeun tiasa tingali, métode konstruktor kelas nangtukeun variabel $title kalawan nilai parameter dibikeun ka komponén. Ayeuna tambahkeun variabel $title dina file komponén header.blade.php pikeun nembongkeun data kaliwat.

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

Ayeuna data komponén anu dikirimkeun ieu bakal ditingalikeun dina browser.

Nya kitu, Anjeun bisa make komponén ieu dina kaca visualisasi sejen kalawan data béda, ku nyieun file visualisasi sejen blade contact.blade.php sareng tambahkeun kodeu komponén di handap pikeun nunjukkeun data anu diliwatan.

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

Dina komponén, sakapeung anjeun kudu nangtukeun atribut HTML tambahan, kayaning ngaran kelas CSS, Anjeun bisa nambah langsung.

<x-header class=”styleDiv” />

Ercole Palmeri