بضائع

ما هي مكونات Laravel وكيفية استخدامها

مكونات Laravel هي ميزة متقدمة ، تمت إضافتها بواسطة الإصدار السابع من Laravel. سنرى في هذه المقالة ما هو المكون وكيفية إنشائه وكيفية استخدام المكونات في نموذج الشفرة وكيفية تحديد معلمات المكون عن طريق تمرير المعلمات.

ما هو مكون Laravel؟

المكون هو جزء من التعليمات البرمجية يمكننا إعادة استخدامه في أي شفرة قالب. إنه شيء مثل الأقسام والتخطيطات ويتضمن. على سبيل المثال ، نستخدم نفس العنوان لكل قالب ، حتى نتمكن من إنشاء مكون Header ، والذي يمكننا إعادة استخدامه.

استخدام آخر للمكونات لفهم أفضل هو أنك تحتاج إلى استخدام زر تسجيل على موقع الويب في العديد من الأماكن مثل الرأس أو التذييل أو في أي مكان آخر على موقع الويب ، ثم قم بإنشاء مكون من رمز الزر هذا وأعد استخدامه.

كيفية إنشاء مكونات في 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” />

على سبيل المثال ، استخدمنا المكون السابق في ملف users.blade.php.

يجب عليك definish بيانات المكون في ملف header.php. كانت جميع بيانات المتغيرات العامة متاحة تلقائيًا لعرض المكون.

أضف الكود في الملف header.php داخل app / http / View / Components / 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 وإضافة رمز المكون أدناه لإظهار البيانات التي تم تمريرها.