וואָס זענען לאַראַוועל קאַמפּאָונאַנץ און ווי צו נוצן זיי

לאַראַוועל קאַמפּאָונאַנץ זענען אַ אַוואַנסירטע שטריך, וואָס איז צוגעגעבן דורך דער זיבעטער ווערסיע פון ​​לאַראַוועל. אין דעם אַרטיקל מיר וועלן זען וואָס קאָמפּאָנענט איז, ווי צו מאַכן עס, ווי צו נוצן קאַמפּאָונאַנץ אין די בלייד מאָדעל און ווי צו פּאַראַמעטעריז די קאָמפּאָנענט דורך פאָרן פּאַראַמעטערס.

וואָס איז לאַראַוועל קאָמפּאָנענט?

א קאָמפּאָנענט איז אַ שטיק פון קאָד וואָס מיר קענען רייוס אין קיין מוסטער בלייד. עס איז עפּעס ווי סעקשאַנז, לייאַוץ און ינקלודז. פֿאַר בייַשפּיל, מיר נוצן די זעלבע כעדער פֿאַר יעדער מוסטער, אַזוי מיר קענען מאַכן אַ כעדער קאָמפּאָנענט, וואָס מיר קענען רייוס.

אן אנדער נוצן פון קאַמפּאָונאַנץ פֿאַר בעסער פארשטאנד איז ווי איר דאַרפֿן צו נוצן אַ רעגיסטרירן קנעפּל אויף וועבזייטל אין פילע ערטער ווי אין כעדער, פוטער אָדער ערגעץ אַנדערש אויף וועבזייטל.אַזוי שאַפֿן אַ קאָמפּאָנענט פון דעם קנעפּל קאָד און רייוז עס.

ווי צו שאַפֿן קאַמפּאָונאַנץ אין Laravel

פֿאַר בייַשפּיל, לאָזן אונדז מאַכן אַ קאָמפּאָנענט Header מיט די'Artisan:

php artisan make:component Header

דער באַפֿעל קריייץ צוויי טעקעס אין דיין לאַראַוועל פּרויעקט:

• אַ פפּ טעקע מיט דעם נאָמען Header.php ין דער וועגווייַזער app/http/View/Components;
• און אַ HTML בלייד טעקע מיט דעם נאָמען header.blade.php ין דער וועגווייַזער resources/views/components/.

איר קענט אויך שאַפֿן קאַמפּאָונאַנץ אין אַ סובדירעקטאָרי, אַזאַ ווי:

php artisan make:component Forms/Button

דער באַפֿעל וועט שאַפֿן אַ קנעפּל קאָמפּאָנענט אין די וועגווייַזער App\View\Components\Forms און די בלייד טעקע וועט זיין געשטעלט אין די רעסורסן / קוקן / קאַמפּאָונאַנץ / פארמען וועגווייַזער.

פֿאַר רענדערינג די קאָמפּאָנענט אין די HTML בלייד טעקע, מיר וועלן נוצן דעם סינטאַקס:

בייַשפּיל פון לאַראַוועל קאַמפּאָונאַנץ

ערשטער מיר אַרייַנלייגן עטלעכע HTML קאָד אין דער טעקע header.blade.php פון די קאָמפּאָנענט.

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

איצט שאַפֿן אַ מיינונג טעקע users.blade.php אין די אַסעץ טעקע, ווו מיר קענען נוצן די כעדער קאָמפּאָנענט.

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

איצט, דורך די סיסטעם פון רוטינג פון לאַראַוועל, מיר רופן די בלייד צו ווייַזן די רעזולטאַט אין דעם בלעטערער

ווי צו אַריבערפירן דאַטן צו לאַראַוועל קאַמפּאָונאַנץ

צו פאָרן דאַטן צו די קאָמפּאָנענט Blade די פאלגענדע סינטאַקס איז געניצט, ספּעציפיצירן די ווערט שייַכות צו דער פּאַראַמעטער ין דער עלעמענט HTML:

<x-header message=”Utenti” />

פֿאַר בייַשפּיל, מיר געוויינט די פריערדיקע קאָמפּאָנענט אין די Users.blade.php טעקע.

די זאלסט defiניש די קאָמפּאָנענט דאַטן אין די header.php טעקע. כל עפנטלעך וועריאַבאַל דאַטן איז אויטאָמאַטיש בנימצא פֿאַר די קאָמפּאָנענט מיינונג.

לייג די קאָד אין דער טעקע header.php ין אַפּ/http/View/קאָמפּאָנענטס/ Directory .

<?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” />

אין דער קאָמפּאָנענט, מאל איר דאַרפֿן צו ספּעציפיצירן נאָך HTML אַטריביוץ, אַזאַ ווי CSS קלאַס נאָמען, איר קענען לייגן עס גלייַך.

<x-header class=”styleDiv” />

Ercole Palmeri