എന്താണ് ലാറവെൽ ഘടകങ്ങൾ, അവ എങ്ങനെ ഉപയോഗിക്കാം

ലാറവെൽ ഘടകങ്ങൾ ഒരു നൂതന സവിശേഷതയാണ്, ഇത് ലാറവലിന്റെ ഏഴാം പതിപ്പ് ചേർത്തിരിക്കുന്നു. ഈ ലേഖനത്തിൽ, ഘടകം എന്താണെന്നും അത് എങ്ങനെ സൃഷ്ടിക്കാമെന്നും ബ്ലേഡ് മോഡലിൽ ഘടകങ്ങൾ എങ്ങനെ ഉപയോഗിക്കാമെന്നും പാരാമീറ്ററുകൾ പാസാക്കി ഘടകം എങ്ങനെ പാരാമീറ്റർ ചെയ്യാമെന്നും കാണാൻ പോകുന്നു.

എന്താണ് ലാറവെൽ ഘടകം?

ഏത് ടെംപ്ലേറ്റ് ബ്ലേഡിലും നമുക്ക് വീണ്ടും ഉപയോഗിക്കാൻ കഴിയുന്ന ഒരു കോഡാണ് ഘടകം. ഇത് വിഭാഗങ്ങൾ, ലേഔട്ടുകൾ, ഉൾപ്പെടുന്നവ എന്നിവ പോലെയാണ്. ഉദാഹരണത്തിന്, ഓരോ ടെംപ്ലേറ്റിനും ഞങ്ങൾ ഒരേ തലക്കെട്ട് ഉപയോഗിക്കുന്നു, അതിനാൽ നമുക്ക് ഒരു ഹെഡർ ഘടകം സൃഷ്ടിക്കാൻ കഴിയും, അത് നമുക്ക് വീണ്ടും ഉപയോഗിക്കാൻ കഴിയും.

ഹെഡറിലോ ഫൂട്ടറിലോ വെബ്‌സൈറ്റിലെ മറ്റെവിടെയെങ്കിലുമോ പോലുള്ള പല സ്ഥലങ്ങളിലും വെബ്‌സൈറ്റിൽ രജിസ്റ്റർ ബട്ടൺ ഉപയോഗിക്കേണ്ടത് പോലെയാണ് കൂടുതൽ നന്നായി മനസ്സിലാക്കുന്നതിനുള്ള ഘടകങ്ങളുടെ മറ്റൊരു ഉപയോഗം. അതിനാൽ ആ ബട്ടൺ കോഡിന്റെ ഒരു ഘടകം സൃഷ്‌ടിച്ച് അത് വീണ്ടും ഉപയോഗിക്കുക.

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 ഘടകങ്ങളിലേക്ക് ഡാറ്റ എങ്ങനെ കൈമാറാം

ഘടകത്തിലേക്ക് ഡാറ്റ കൈമാറാൻ Blade മൂലകത്തിനുള്ളിലെ പരാമീറ്ററുമായി ബന്ധപ്പെട്ട മൂല്യം വ്യക്തമാക്കുന്ന ഇനിപ്പറയുന്ന വാക്യഘടന ഉപയോഗിക്കുന്നു HTML:

<x-header message=”Utenti” />

ഉദാഹരണത്തിന്, ഞങ്ങൾ user.blade.php ഫയലിൽ മുമ്പത്തെ ഘടകം ഉപയോഗിച്ചു.

നീ ചെയ്തിരിക്കണം defiheader.php ഫയലിലെ ഘടക ഡാറ്റ ഇല്ലാതാക്കുക. ഘടക കാഴ്‌ചയ്‌ക്കായി എല്ലാ പൊതു വേരിയബിൾ ഡാറ്റയും സ്വയമേവ ലഭ്യമാണ്.

ഫയലിൽ കോഡ് ചേർക്കുക ആപ്പ്/http/View/Components/ ഡയറക്‌ടറിക്കുള്ളിൽ header.php .

<?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 പാസ്സായ ഡാറ്റ കാണിക്കുന്നതിന് താഴെയുള്ള ഘടക കോഡ് ചേർക്കുക.