برنامه نویسی

نحوه استفاده از 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".

اگر سوال یا پیشنهادی دارید از خواندن این مقاله سپاسگزاریم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا