کامپوننت ها در لاراول

کامپوننت ها در لاراول، در این مطلب با مفهوم component و نحوه استفاده از آن در فریم ورک محبوب لاراول آشنا می شویم.

آموزش استفاده از کامپوننت در لاراول

همه توسعه دهندگان و برنامه نویسان با کامپوننت ها آشنایی دارند اما اجازه بدید در ابتدا یک تعریف از این ویژگی داشته باشیم.

لاراول کامپوننت چیست؟

کامپوننت یک قطعه کد است که می‌توانیم آن را Template Blade لاراول بارها استفاده کنیم. یعنی اینکه یک بار بلاک کدی رو می نویسیم و هر جا نیاز باشه ازش استفاده می کنیم.

حالا سوال پیش میاد این که همون include در php یا Partials در لاراول هست پس چه فرقی داره؟!

تفاوتش اینجاست که ما در کامپوننت ها امکان استفاده از props ها رو هم داریم.

به عنوان مثال من می خوام محتوای یک div رو به شکل کامپوننت در بیارم و در فایل اصلی خودم فقط فراخوانیش کنم، حالا این div یا بلاک کد من شامل متغیر یا مقداری هست که باید به کامپوننت پاس داده بشه تا اونجا دریافت و پردازش بشه، این ارسال اطلاعات بین کامپوننت و فایلی که در آن فراخوانی می شود از طریق props انجام می شود.

بریم یه مثال ببینیم…

من در پوشه “view” یک پوشه دیگه با نام “components” برای نگهداری و مدیریت فایل های کامپوننت خودم ایجاد می کنم.

مثال استفاده از کامپوننت در لاراول

در اینجا من محتوایی از فایل “listings.blade.php” رو می خوام در یک کامپوننت به نام “listing-card.blade.php” قرار بدم و در نهایت فراخوانیش کنم.

کدهای فایل “listings.blade.php” به شکل زیر می باشد:

				
					@unless (count($listings) ==0)

@foreach ($listings as $listing)

<x-listing-card :listing="$listing" />

@endforeach
@else
<p>No listing found</p>
@endunless

@endsection

در خط کد 5 من فایل کامپوننت خودمم رو که همان “listing-card.blade.php” هست رو فراخوانی کردم و همچنین مقدار “listing” رو براش ارسال کردم.

فایل کامپوننت خودم رو باز می کنم و کدهای زیر رو درونش می نویسم:

				
					//listing-card.blade.php

@props(['listing'])

<div class="bg-primary text-yellow-50 p-4 rounded mt-2">
    <h2>
      <a href="/listings/{{ $listing['id'] }}" class="text-white">{{$listing->title}}</a>
    </h2>
    <p>
      {{ $listing->description }}
    </p>
    <span>
      {{ $listing->location }}</span>
  
  </div>

در قطعه کد بالا ابتدا متغیر ارسالی از فایل اصلی رو از طریق props دیافت و در کدهای کامپوننت استفاده کردم.

حالت دیگری داریم که به نام “slot” معروف است.

مفهوم slot در لاراول

ما به حالتی که بخواهیم از تگ های باز و بسته یک کامپوننت استفاده کنیم و محتوای مورد نظر در بین این تگ ها قرار بگیرن “slot” می گوییم.

بریم مثال ببینیم…

در این مثال من یک فایل به نام “card.blade.php” در پوشه کامپوننت ایجاد کردم و کدهای زیر درونش نوشتم:

				
					<div class="bg-success text-yellow-50 p-4 rounded mt-2 mb-4">
 {{ $slot }}
</div>

فایل دیگری به نام “listing.card.blade.php” در پوشه “view” یا کامپوننت ایجاد می کنم و برای استفاده از حالت slot کدینگش رو به شکل زیر می نویسم:

				
					@props(['listing'])

<x-card>
    <h2>
      <a href="/listings/{{ $listing['id'] }}" class="text-white">{{$listing->title}}</a>
    </h2>
    <p>
      {{ $listing->description }}
    </p>
    <span>
      {{ $listing->location }}</span>
</x-card>

در اینجا محتوا رو بین تگ های باز و بسته “x-card” نوشتم، که جایگزین متغیر “slot” می شوند.