В Laravel компоненты предоставляют удобный способ организации и повторного использования элементов пользовательского интерфейса в вашем приложении. Если вам нужно создать многоразовую форму, собственное меню навигации или любой другой компонент пользовательского интерфейса, Laravel предлагает несколько способов сделать это. В этой статье мы рассмотрим различные методы создания новых компонентов в Laravel, а также приведем примеры кода.

Методы создания компонентов:

1. Использование команды Artisan:
   Laravel предоставляет команду Artisan для быстрого создания нового компонента. Откройте терминал и перейдите в корневой каталог вашего проекта, затем выполните следующую команду:

php artisan make:component MyComponent

Эта команда создаст новый класс компонентов с именем MyComponentв каталоге app/View/Components. Вы можете настроить имя в соответствии с вашими требованиями.

1. Создание вручную.
   Если вы предпочитаете ручной подход, вы можете создать новый класс непосредственно в каталоге app/View/Components. Например, создайте файл под названием MyComponent.phpсо следующим содержимым:

<?php
namespace App\View\Components;
use Illuminate\View\Component;
class MyComponent extends Component
{
    public function render()
    {
        return view('components.my-component');
    }
}

1. Файл представления Blade:
   Далее вам необходимо создать соответствующий файл представления Blade для вашего компонента. По соглашению файл представления должен называться my-component.blade.phpи располагаться в каталоге resources/views/components. Вот пример контента для my-component.blade.php:

<div>
    <!-- Your component's HTML structure goes here -->
</div>

1. Использование слотов.
   Слоты позволяют вам определять области внутри вашего компонента, куда вы можете вставлять собственный контент. Чтобы использовать слоты, измените файл представления Blade вашего компонента следующим образом:

<div>
    <h2>{{ $title }}</h2>
    <div>
        {{ $slot }}
    </div>
</div>

Затем вы можете передать контент в слот при использовании компонента:

<x-my-component title="My Component">
    <p>This is the content of my component.</p>
</x-my-component>

1. Атрибуты компонентов.
   Вы можете определить собственные атрибуты для своих компонентов, что позволит передавать данные из родительского представления. Измените класс компонента следующим образом:

class MyComponent extends Component
{
    public $title;
    public function __construct($title)
    {
        $this->title = $title;
    }
    public function render()
    {
        return view('components.my-component');
    }
}

<x-my-component title="My Component" />