የላራቬል ክፍሎች ምንድን ናቸው እና እንዴት እንደሚጠቀሙባቸው

የላራቬል ክፍሎች የላቀ ባህሪ ናቸው, እሱም በሰባተኛው የላራቬል ስሪት ተጨምሯል. በዚህ ጽሑፍ ውስጥ ምን ዓይነት አካላት ምን እንደሆኑ, እንዴት እንደሚፈጠሩ, እንዴት በቡላ ሞዴል ውስጥ ክፍሎችን እንዴት እንደሚጠቀሙ እና መለኪያዎችን በማለፍ ክፍሉን እንዴት እንደሚወስኑ እንመለከታለን.

የላራቬል አካል ምንድን ነው?

አንድ አካል በማንኛውም የአብነት ምላጭ ውስጥ እንደገና ልንጠቀምበት የምንችልበት ኮድ ቁራጭ ነው። እንደ ክፍሎች፣ አቀማመጦች እና ያካትታል። ለምሳሌ፣ ለእያንዳንዱ አብነት አንድ አይነት አርዕስት እንጠቀማለን፣ ስለዚህ የራስጌ አካል መፍጠር እንችላለን፣ ይህም እንደገና ልንጠቀምበት እንችላለን።

ሌላው ለተሻለ ግንዛቤ የመለዋወጫ አጠቃቀም በድር ጣቢያ ላይ የመመዝገቢያ ቁልፍን እንደ ራስጌ፣ ግርጌ ወይም ድረ-ገጽ ላይ ባሉ ብዙ ቦታዎች መጠቀም እንደሚያስፈልግ ነው።ስለዚህ የዛ አዝራር ኮድ አካል ይፍጠሩ እና እንደገና ይጠቀሙበት።

በላራቬል ውስጥ ክፍሎችን እንዴት መፍጠር እንደሚቻል

ለምሳሌ አንድ አካል እንፍጠር Header ጋር'Artisan:

php artisan make:component Header

ይህ ትዕዛዝ በእርስዎ ላራቬል ፕሮጀክት ውስጥ ሁለት ፋይሎችን ይፈጥራል፡-

• የ PHP ፋይል ከስሙ ጋር Header.php በማውጫው ውስጥ app/http/View/Components;
• እና ስሙ ያለው የኤችቲኤምኤል ምላጭ ፋይል header.blade.php በማውጫው ውስጥ resources/views/components/.

እንዲሁም በንዑስ ማውጫ ውስጥ ክፍሎችን መፍጠር ይችላሉ፣ ለምሳሌ፡-

php artisan make:component Forms/Button

ይህ ትእዛዝ በማውጫው ውስጥ የአዝራር አካል ይፈጥራል App\View\Components\Forms እና የቢላ ፋይሉ በንብረቶች / እይታዎች / ክፍሎች / ቅጾች ማውጫ ውስጥ ይቀመጣል.

በኤችቲኤምኤል ምላጭ ፋይል ውስጥ ያለውን አካል ለማሳየት፣ ይህን አገባብ እንጠቀማለን፡-

የላራቬል አካላት ምሳሌ

በመጀመሪያ የኤችቲኤምኤል ኮድ ወደ ፋይሉ ውስጥ እናስገባለን። header.blade.php የክፍሉ.

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

አሁን የእይታ ፋይል ይፍጠሩ users.blade.php በንብረቶች አቃፊ ውስጥ, የራስጌ አካልን መጠቀም የምንችልበት.

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

አሁን ፣ በስርአቱ በኩል ማስተላለፍ የላራቬል, ውጤቱን በአሳሹ ውስጥ ለማሳየት ምላጩን እንጠራዋለን

መረጃን ወደ ላራቬል ክፍሎች እንዴት ማስተላለፍ እንደሚቻል

መረጃን ወደ ክፍሉ ለማስተላለፍ Blade በንጥሉ ውስጥ ካለው ግቤት ጋር የሚዛመደውን እሴት በመግለጽ የሚከተለው አገባብ ጥቅም ላይ ይውላል HTML:

<x-header message=”Utenti” />

ለምሳሌ, በተጠቃሚዎች.blade.php ፋይል ውስጥ የቀደመውን አካል ተጠቀምን.

አለብዎት defiበ header.php ፋይል ውስጥ ያለውን አካል መረጃ nish. ሁሉም የህዝብ ተለዋዋጭ ውሂብ ለክፍለ አካል እይታ በራስ-ሰር ይገኛል።

በፋይሉ ውስጥ ኮዱን ያክሉ header.php ውስጥ መተግበሪያ/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 እና ያለፈውን ውሂብ ለማሳየት የክፍል ኮድ ከታች ያክሉ።

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

በክፍሉ ውስጥ, አንዳንድ ጊዜ ተጨማሪ የኤችቲኤምኤል ባህሪያትን መግለጽ ያስፈልግዎታል, ለምሳሌ የሲኤስኤስ ክፍል ስም, በቀጥታ ማከል ይችላሉ.

<x-header class=”styleDiv” />

Ercole Palmeri