فصل سه - Views

بخش سوم - کامپوننت ها - قسمت دوم

ارسال داده‌ها و متغیرها به کامپوننت‌ها برای پویا سازی آنها بسیار مهم است.

برای این کار کافی است درون فایل View کامپوننت خود متغییر ها را چاپ کنیم:

// resources/views/components/alert.blade.php
<div class="alert alert-{{ $type }}">
 {{ $message }}
</div>

برای مقدار دهی متغیر های type و message در هنگام فراخوانی کامپوننت می توانید به صورت اتریبیوت های HTML پاس بدهیم:

<x-alert type="success" message="successful!" />

در اینجا، مقادیر type و message به متغیرهای تعریف‌شده در کامپوننت ارسال می‌شوند و در نهایت، HTML تولید شده و در صفحه نمایش داده می‌شود.

در مثال بالا داده های استاتیک قابل ارسال است، برای ارسال متغیر باید به روش زیر عمل کنید:

<x-alert :type="$alertType" :message="$alertMessage" />

علامت : قبل از نام متغیرها به این معناست که داده‌ها به عنوان متغیرهای PHP ارسال می‌شوند نه به عنوان رشته ثابت.
متغیرهای $alertType و $alertMessage می‌توانند از کنترلر یا جای دیگری در ویو شما باشند.

اگر از کامپوننت های کلاس محور استفاده می کنید می توانید این متغییر ها را درون کلاس نیز داشته باشید، کافی است متغیر ها را به صورت پراپرتی بنویسید و در کانستراکتور مقداردهی کنید:

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
 public $type;
 public $message;

 public function __construct($type, $message)
 {
  $this->type = $type;
  $this->message = $message;
 }

 public function render()
 {
  return view('components.alert');
 }
}

در مثال بالا متغیر ها از طریق پراپرتی های تعریف شده در دسترس قرار دارند.

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

اسلات پیش‌فرض در واقع محتوا یا بخشی از HTML است که به طور مستقیم بین تگ‌های کامپوننت در ویو تعریف می‌شود و سپس در کامپوننت نمایش داده می‌شود.

محتوای بین تگ های کامپوننت از طریق متغیر $slot در فایل ویو در دسترس هستند.

<div class="alert alert-{{ $type }}">
 {{ $slot }}
</div>

در اینجا {{ $slot }} به عنوان اسلات پیش‌فرض عمل می‌کند. یعنی محتوایی که به این کامپوننت ارسال می‌شود، در جایگاه {{ $slot }} قرار می‌گیرد.

حالا می‌توانید این کامپوننت را در یک ویو دیگر به این شکل استفاده کنید:

<x-alert type="warning">
 This is a warning alert!
</x-alert>

در این مثال، متن "This is a warning alert!" به عنوان اسلات پیش‌فرض در مکان {{ $slot }} قرار می‌گیرد و خروجی HTML به صورت زیر خواهد بود:

<div class="alert alert-warning">
 This is a warning alert!
</div>

اسلات‌های نام‌گذاری شده به شما امکان می‌دهند که بخش‌های مختلف یک کامپوننت را از طریق اسلات‌های مختلف پر کنید. این ویژگی زمانی مفید است که کامپوننت شما نیاز به دریافت چندین بخش محتوا داشته باشد.

<div class="card">
 <div class="card-header">
  {{ $header }}
 </div>
 <div class="card-body">
  {{ $slot }}
 </div>
</div>

در اینجا، {{ $header }} یک اسلات نام‌گذاری شده است و {{ $slot }} به عنوان اسلات پیش‌فرض برای محتوای اصلی استفاده می‌شود.

برای استفاده از این کامپوننت، شما می‌توانید به این صورت عمل کنید:

<x-card>
 <x-slot:header>
  Card Title
 </x-slot>
 This is the card content.
</x-card>

در این مثال:
مقدار "Card Title" به عنوان محتوای اسلات نام‌گذاری شده header به کامپوننت ارسال می‌شود.

و مقدار "This is the card content." به عنوان محتوای پیش‌فرض درون اسلات پیش‌فرض ({{ $slot }}) قرار می‌گیرد.

نامگذاری متغیر های ورودی:

نام متغیر های درون کامپوننت باید به صورت cameCase نوشته شوند:

<div class="alert alert-{{ $alertType }}">
 {{ $slot }}
</div>

و نام اتریبیوت ورودی باید به صورت kebab-case نوشته شود:

<x-alert :alert-type="$alertType">
 Alert
</x-alert>

درصورتی که نام متغیر درون کامپوننت با نام متغیری که باید به کامپوننت پاس داده شود برابر باشد می توانید آن را به صورت کوتاه شده بنویسید:

<x-alert :$alertType>
 Alert
</x-alert>

گاهی ممکن است ورودی های ما با دستورات Blade به تداخل بخورد، برای escape کردن آن تنها کافی است از دو عبارت :: استفاده کنید تا توسط Blade رندر نشوند:

<x-button ::class="{ danger: isDeleting }">
  Submit
</x-button>

🔖 #Laravel, #PHP, #لاراول, #فصل_۳

👤 AmirHossein

💎 Channel: @DevelopixLaravel