نحوه استفاده از Component در لاراول

چرا؟؟ برای استفاده از کامپوننت؟
پاسخ: با استفاده از مؤلفههایی که به استفاده از کد تمیز کمک میکنند و ما میتوانیم قابلیت استفاده مجدد را در داخل اجزای شما جدا کرده و در هر جایی از فایل blade شما استفاده کنیم.
دو نوع کامپوننت در کامپوننت پایه کلاس اول لاراول وجود دارد که میتواند دادهها را از فایلهای blade ارسال کند و دیگری که کامپوننت ناشناس نیز نامیده میشود که نیازی به انتقال مستقیم دادهها در فایل بلید شما ندارد. نگران نباشید قدم به قدم به شما توضیح خواهم داد.
مرحله 1
شما باید با استفاده از خط فرمان artisan یک کامپوننت تولید کنید
php artisan make:component Forms/InputText
سپس دو فایل دریافت خواهید کرد که یکی داخل است app\View\Components\Forms\InputText.php
و دیگر resources\views\components\forms\input-text.blade.php
.
گام 2
به پوشه InputText.php بروید
<?php
namespace App\View\Components\Forms;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class InputText extends Component
{
public string $type;
public string $label;
public string $name;
public string $placeholder;
/**
* Create a new component instance.
*/
public function __construct(
$type,
$label,
$name,
$placeholder
) {
$thsis->type = $type;
$this->label = $label;
$this->name = $name;
$this->placeholder = $placeholder;
}
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.forms.input-text');
}
}
این کد بالا برای اعلان یک متغیر است که از اجزای تیغه ارسال می کنیم
مرحله 3
به forms\input-text.blade.php بروید و از متغیرهایی که در کلاس InputText استفاده کردید استفاده کنید.
<div>
<label for="{{ $name }}">{{$label}}</label>
<input type="{{ $type }}"
class="form-control @error('email') is-invalid @enderror"
id="{{ $name }}" name="{{ $name }}"
placeholder="{{ $placeholder }}">
@error($name)
<div class="invalid-feedback">
{{ $message->first() }}
</div>
@enderror
</div>
مرحله 4
به هر فایل blade داخل خود بروید می توانید از این مؤلفه ها مانند زیر استفاده کنید
<x-forms.input-text type="text"
label="Name"
name="name"
placeholder="Please Enter your name"
/>
را InputText
مؤلفه به شما امکان می دهد فیلدهای متنی ورودی ایجاد کنید. هنگام استفاده از این کامپوننت، می توانید متغیرها را با استفاده از name
ویژگی داخل :name="$name"
.
اگر سوال یا پیشنهادی دارید از خواندن این مقاله سپاسگزاریم.