લેખ

Laravel ઘટકો શું છે અને તેનો ઉપયોગ કેવી રીતે કરવો

Laravel ઘટકો એક અદ્યતન લક્ષણ છે, જે laravel ના સાતમા સંસ્કરણ દ્વારા ઉમેરવામાં આવે છે. આ લેખમાં આપણે એ જોવા જઈ રહ્યા છીએ કે ઘટક શું છે, તેને કેવી રીતે બનાવવું, બ્લેડ મોડેલમાં ઘટકોનો ઉપયોગ કેવી રીતે કરવો અને પરિમાણો પસાર કરીને ઘટકને કેવી રીતે પરિમાણિત કરવું.

Laravel ઘટક શું છે?

એક ઘટક એ કોડનો એક ભાગ છે જેનો આપણે કોઈપણ ટેમ્પલેટ બ્લેડમાં ફરીથી ઉપયોગ કરી શકીએ છીએ. તે વિભાગો, લેઆઉટ અને સમાવિષ્ટો જેવું કંઈક છે. ઉદાહરણ તરીકે, અમે દરેક ટેમ્પલેટ માટે સમાન હેડરનો ઉપયોગ કરીએ છીએ, તેથી અમે હેડર ઘટક બનાવી શકીએ છીએ, જેનો અમે ફરીથી ઉપયોગ કરી શકીએ છીએ.

વધુ સારી રીતે સમજવા માટે ઘટકોનો બીજો ઉપયોગ એ છે કે તમારે વેબસાઈટ પર હેડર, ફૂટર અથવા વેબસાઈટ પર અન્ય કોઈ જગ્યાએ રજીસ્ટર બટનનો ઉપયોગ કરવાની જરૂર છે. તેથી તે બટન કોડનો એક ઘટક બનાવો અને તેનો ફરીથી ઉપયોગ કરો.

Laravel માં ઘટકો કેવી રીતે બનાવવું

ઉદાહરણ તરીકે, ચાલો એક ઘટક બનાવીએ Header ની સાથે'Artisan:

php artisan make:component Header

આ આદેશ તમારા laravel પ્રોજેક્ટમાં બે ફાઇલો બનાવે છે:

નામ સાથે PHP ફાઇલ Header.php ડિરેક્ટરીની અંદર app/http/View/Components;
અને નામ સાથે HTML બ્લેડ ફાઇલ header.blade.php ડિરેક્ટરીની અંદર resources/views/components/.

તમે સબડિરેક્ટરીમાં ઘટકો પણ બનાવી શકો છો, જેમ કે:

php artisan make:component Forms/Button

આ આદેશ ડિરેક્ટરીમાં એક બટન ઘટક બનાવશે App\View\Components\Forms અને બ્લેડ ફાઇલને રિસોર્સ/વ્યુ/કોમ્પોનન્ટ્સ/ફોર્મ ડિરેક્ટરીમાં મૂકવામાં આવશે.

HTML બ્લેડ ફાઇલમાં ઘટકને રેન્ડર કરવા માટે, અમે આ વાક્યરચનાનો ઉપયોગ કરીશું:

Laravel ઘટકોનું ઉદાહરણ

પહેલા આપણે ફાઈલમાં અમુક HTML કોડ દાખલ કરીએ છીએ header.blade.php ઘટકનું.

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

હવે વ્યુ ફાઇલ બનાવો users.blade.php એસેટ ફોલ્ડરમાં, જ્યાં આપણે હેડર ઘટકનો ઉપયોગ કરી શકીએ છીએ.

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

હવે, ની સિસ્ટમ દ્વારા રૂટીંગ laravel ના, અમે બ્રાઉઝરમાં પરિણામ પ્રદર્શિત કરવા માટે બ્લેડને કૉલ કરીએ છીએ

Laravel ઘટકોમાં ડેટા કેવી રીતે પસાર કરવો

ઘટકને ડેટા પાસ કરવા માટે Blade નીચે આપેલ વાક્યરચનાનો ઉપયોગ થાય છે, જે તત્વની અંદરના પરિમાણ સાથે સંબંધિત મૂલ્યનો ઉલ્લેખ કરે છે HTML:

<x-header message=”Utenti” />

ઉદાહરણ તરીકે, અમે user.blade.php ફાઇલમાં અગાઉના ઘટકનો ઉપયોગ કર્યો છે.

તમારે જોઈએ defiheader.php ફાઇલમાં ઘટક ડેટાને નિશ કરો. તમામ સાર્વજનિક ચલ ડેટા ઘટક દૃશ્ય માટે આપમેળે ઉપલબ્ધ હતો.

ફાઇલમાં કોડ ઉમેરો header.php in 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;

   }
}

જેમ તમે જોઈ શકો છો, વર્ગની કન્સ્ટ્રક્ટર પદ્ધતિ ચલ સેટ કરે છે $title પરિમાણ મૂલ્ય ઘટકને પસાર કરીને. હવે વેરીએબલ ઉમેરો $title ઘટક ફાઇલમાં header.blade.php ભૂતકાળનો ડેટા બતાવવા માટે.

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

હવે આ પ્રસારિત ઘટક ડેટા બ્રાઉઝરમાં પ્રદર્શિત થશે.

તેવી જ રીતે, તમે આ ઘટકનો ઉપયોગ અન્ય વિઝ્યુલાઇઝેશન પેજ પર અલગ ડેટા સાથે, બીજી વિઝ્યુલાઇઝેશન ફાઇલ બનાવીને કરી શકો છો. blade contact.blade.php અને પસાર થયેલ ડેટા બતાવવા માટે નીચેનો ઘટક કોડ ઉમેરો.