Články

Co jsou komponenty Laravel a jak je používat

Komponenty Laravel jsou pokročilou funkcí, kterou přidává sedmá verze laravel. V tomto článku se podíváme, co je komponenta, jak ji vytvořit, jak používat komponenty v blade modelu a jak parametrizovat komponentu předáním parametrů.

Co je Laravel Component?

Komponenta je část kódu, kterou můžeme znovu použít v libovolné šabloně blade. Je to něco jako sekce, rozvržení a zahrnuje. Například pro každou šablonu používáme stejné záhlaví, takže můžeme vytvořit komponentu Header, kterou můžeme znovu použít.

Další použití komponent pro lepší porozumění je, jako když potřebujete použít tlačítko pro registraci na webu na mnoha místech, jako je záhlaví, zápatí nebo kdekoli jinde na webu. Vytvořte si tedy komponent kódu tohoto tlačítka a znovu jej použijte.

Jak vytvářet komponenty v Laravelu

Vytvořme si například komponentu Header S 'Artisan:

php artisan make:component Header

Tento příkaz vytvoří ve vašem projektu laravel dva soubory:

soubor PHP s názvem Header.php uvnitř adresáře app/http/View/Components;
a soubor blade HTML s názvem header.blade.php uvnitř adresáře resources/views/components/.

Můžete také vytvořit komponenty v podadresáři, například:

php artisan make:component Forms/Button

Tento příkaz vytvoří v adresáři komponentu tlačítka App\View\Components\Forms a soubor blade bude umístěn do adresáře resources/views/components/forms.

Pro vykreslení komponenty v souboru blade HTML použijeme tuto syntaxi:

Příklad komponent Laravel

Nejprve do souboru vložíme nějaký HTML kód header.blade.php ze složky.

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

nyní vytvořte soubor zobrazení users.blade.php ve složce aktiv, kde můžeme použít komponentu header.

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

nyní prostřednictvím systému Směrování laravel, voláme blade, abychom zobrazili výsledek v prohlížeči

Jak předávat data komponentám Laravel

K předání dat komponentě Blade je použita následující syntaxe uvádějící hodnotu související s parametrem uvnitř prvku HTML:

<x-header message=”Utenti” />

Předchozí komponentu jsme například použili v souboru users.blade.php.

Měl by jsi defidoplňte data komponenty do souboru header.php. Všechna veřejná data proměnných byla automaticky dostupná pro zobrazení komponent.

Přidejte kód do souboru header.php v adresáři 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;

   }
}

Jak vidíte, metoda konstruktoru třídy nastavuje proměnnou $title s hodnotou parametru předanou komponentě. Nyní přidejte proměnnou $title v souboru součásti header.blade.php zobrazit minulá data.

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

Nyní se tato přenášená data komponentu zobrazí v prohlížeči.

Podobně můžete tuto komponentu použít na jiné stránce vizualizace s jinými daty vytvořením jiného souboru vizualizace blade contact.blade.php a přidejte níže kód součásti, aby se zobrazila předaná data.