کامپوننت‌ها در قالب لاراول زمان مورد نیاز برای توسعه اپلیکیشن را کاهش می‌دهد. این کامپوننت‌ها به ما برای ساخت اپلیکیشن‌های عالی و مناسب کمک فراوانی می‌کند.
ایده ایجاد کامپوننت در قالب از VueJs الهام گرفته شده است تا المنت‌های html را به قسمت‌های منعطف‌تر با قابلیت استفاده مجدد تقسیم کند.
یک کامپوننت در واقع یک گروه از المنت‌هایی است که از آن‌ها می‌توان بارها و بارها استفاده کرد. به عنوان مثال شما می‌خواهید یک دکمه بسازید و از آن در قسمت‌های مختلفی از اپلیکیشن خود چند بار استفاده کنید، بنابراین برای حل این مشکل ما یک کامپوننت دکمه می‌سازیم و به لاراول می‌گویم که هر وقت که می‌خواستیم از آن کامپوننت استفاده کنیم آن را بگیرد.
ایجاد یک کامپوننت
فرض کنید می‌خواهیم یک کامپوننت هشدار بوت استرپ را ایجاد کنیم که بتوانیم این کامپوننت را در موارد مختلف فراخوانی کنیم. پس به پوشه resources/views/ رفته و یک پوشه به نام components را ایجاد می‌کنیم. در ادامه ما یک فایل به نام alert.blade.php را در این پوشه ایجاد کرده و کدهای زیر را به آن اضافه می‌کنیم:
<div class="alert alert-danger">
<h4 class="alert-title">Error</h4>
<p>{{ $slot }}</p>
</div>همانطور که در بالا می‌بینید ما تلاش می‌کنیم تا متغیر $slot را مانند یک مکان برای جایگزینی قرار دهیم. هر مقداری که می‌خواهیم چاپ کنیم به این متغیر منتقل می‌شود.
استفاده از کامپوننت
در ادامه به توضیح اینکه چطور از کامپوننتی که ایجاد کرده‌ایم، استفاده کنیم می‌پردازیم. ابتدا به سراغ فایل view که کامپوننت را می‌خواهیم در آن اجرا کنیم می‌رویم و کد زیر را برای فراخوانی کامپوننت هشدار به آن اضافه می‌کنیم:
@component('components.alert')
This is a dummy message, just for testing purpose.
@endcomponentبا استفاده از دایرکتیو @component ، ما کامپوننت هشداری که پیش‌تر ایجاد کردیم را مورد استفاده قرار می‌دهیم.
ایجاد کامپوننت‌هایی با قابلیت استفادی مجدد
همانطور که می‌بینید، کامپوننتی را که ایجاد کردیم قابل استفاده مجدد نیست. این کامپوننت تقریباً مشابه با یک partials است که ما آن را ایجاد کرده‌ایم و با دایرکتیو @include آن را به view خود اضافه کرده‌ایم. فرض کنید، می‌خواهیم یک کامپوننت داینامیک هشدار ایجاد کنیم که بتوانیم از انواع خطر، موفقیت و هشدار آن استفاده کنیم. بنابراین ما مجبور هستیم که کلاس و عنوان این کامپوننت هشدار را قابل استفادی مجدد کنیم.
برای این کار ما دو متغیر $class و $title را در کامپوننت خود مانند زیر تعریف می‌کنیم:
<div class="alert alert-{{ $class }}">
<h4 class="alert-title">{{ $title }}</h4>
<p>{{ $slot }}</p>
</div>در ادامه ما از چندینslots در کامپوننت خود استفاده می‌کنیم، بنابراین به فایل view که کامپوننت در آن استفاده شده است می رویم و بعد آن را مانند زیر تغییر می‌دهیم:
@component('components.alert')
@slot('class')
success
@endslot
@slot('title')
Success Message
@endslot
This is a success message, just for testing purpose.
@endcomponentدر کد بالا برای دو متغیر $class و $title مقادیر مورد نظر را قرار داده‌ایم. حالا اگر شما به فایل view خود در مرورگر نگاه کنید شما یک هشدار از نوع موفقیت (success alert) را خواهید دید، به همین ترتیب شما می‌توانید از کامپوننت‌هایی مانند این کامپوننت برای انواع مختلفی از پیام‌ها استفاده کنید مانند زیر:
@component('components.alert')
@slot('class')
warning
@endslot
@slot('title')
Warning Message
@endslot
This is a warning message, just for testing purpose.
@endcomponentدر کد بالا یک کامپوننت هشدار از نوع warning ساخته شده و پیاده سازی آن نیز به همان صورت قبل خواهد بود.
نتیجه‌گیری
کامپوننت‌ها در قالب لاراول یک راه خوب برای ایجاد المنت‌های html قابل استفاده مجدد هستند. در اینجا ما به شما ساخت یک کامپوننت خیلی ساده را نشان دادیم، اما شما می‌توانید انواع پیچیدتری از این کامپوننت‌ها را با استفاده از کامپوننت‌های قالب لاراول بسازید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید