Laravel 7의 블레이드 뷰 구성요소를 처음으로 살펴봅니다.

구성 요소 기능은 블레이드 지시문으로 Laravel에 이미 존재했습니다. docs link
그러나 Laravel 7에서는 완전히 새로운 수준으로 끌어 올렸습니다.
다이빙하자.

Laravel 7 has not been released at the time of writing this article, if you want to follow along, you can download it with below command.

laravel new projectname --dev

구성 요소 만들기

새로운 Artisan 명령을 사용하여 구성 요소를 쉽게 생성할 수 있습니다.
php artisan make:component Alert
이 명령은 두 개의 파일을 생성합니다.

클래스 파일( App\View\Components\Alert.php )

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

블레이드 파일( resources/views/components/alert.blade.php )

<div>
    <!-- He who is contented is rich. - Laozi -->
</div>

렌더링할 때 이 구성 요소가 작동하는 것을 볼 수 있도록 이 HTML을 수정해 보겠습니다.

<div>
    <h3>Alert Component</h3>
</div>

렌더링 구성 요소

구성 요소는 블레이드 템플릿 내에서 사용하기 위한 것입니다. 블레이드 파일에서 구성 요소를 사용하기 위한 특수 구문이 있습니다.

x- followed by the kebab case name of component class.

<x-alert />

Alert에서 welcome.blade.php 구성 요소를 사용합시다.

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>
                <div>
                    <x-alert/>
                </div>
            </div>

산출:

자동 검색

라라벨은 app/View/Components 디렉토리와 resources/views/components 디렉토리에 있는 구성 요소를 자동으로 검색할 수 있습니다.

그러나 구성 요소가 예를 들어 App\View\Components\Alerts\Success.php 디렉토리에 중첩되어 있으면 어떻게 됩니까?

We can use . notation to indicate directory nesting.

<x-alerts.success />

구성 요소에 데이터 전달

HTML 속성을 통해 데이터를 전달할 수 있습니다. Vue 구성 요소에서 전달props과 유사합니다.

프리미티브 또는 하드 코딩된 값

<x-alert type="error" />

변수 및 식은 : 접두사를 사용하여 전달해야 합니다.

<x-alert :message="$message" />

구성 요소의 클래스에서 이 데이터는 생성자를 통해 사용할 수 있어야 합니다.

class Alert extends Component
{
    public string $type;

    public string $message;

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

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

두 속성이 모두 public 로 설정되어 있습니다.

All public properties will be available to component's view file. You don't need to pass the data to view from render() method.

alert.blade.php는 이러한 속성을 다음과 같이 사용할 수 있습니다.

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

이 주제와 관련된 몇 가지 다른 사항이 있습니다.

익명 구성요소

보기에서 공용 메서드에 액세스
하지만 Deeper look 기사에서 다룰 수 있을 것 같아요 🤷🏻‍♂️

Calling it First look because I am actually reading docs while writing this article 😂 docs link

아래 의견에서 Blade View 구성 요소에 대한 생각을 알려주십시오.