레이아웃에 Laravel 블레이드 구성 요소 사용

레이아웃용 블레이드 구성 요소
에서는 Laravels 블레이드 뷰 구성 요소의 작동 방법과 사용 방법을 보여 줍니다.
이 시리즈의 이 부분에서, 나는 전체 응용 프로그램에서 이러한 구성 요소를 어떻게 사용하는지 중점적으로 소개하고 싶다. 가장 기본적인 부분부터: 당신의 레이아웃부터.
전형적인 Laravel 응용 프로그램에서는 layouts/app.blade.php 라는 파일이 있을 수 있으며, 모든 다른 보기가 이 파일에서 확장될 수 있습니다.
이러한 관점은 다음과 같을 수 있다.

<!DOCTYPE html>
<html>
    <head>
        @yield('scripts')
    </head>
    <body>
        @yield('content')
    </body>
</html>

실제 페이지에서는 extend 섹션에서 컨텐츠를 확인하고 제공합니다.다음은 예제content 파일입니다.

@extends('layouts.app')

@section('scripts')
    <!-- Some JS and styles -->
@endsection

@section('content')
  <div>My Page content is here</div>
@endsection

지금까지는 괜찮았는데, 우리가 새로 배운 칼날 조립품을 어떻게 활용해서 그것을 재구성하는지 봅시다.
먼저 레이아웃이라는 새 어셈블리를 생성합니다.

php artisan make:component Layout

그런 다음 기존 레이아웃 뷰 코드를 모두 가져와 새 레이아웃 어셈블리 뷰에 배치할 수 있습니다.

<!-- /views/components/layout.blade.php -->
<!DOCTYPE html>
<html>
    <head>
        @yield('scripts')
    </head>
    <body>
        @yield('content')
    </body>
</html>

이를 위해서는 확장된 레이아웃이 아닌 welcome.blade.php 파일에서 한 가지 작업만 수행해야 합니다. 아래 그림과 같이 모든 내용을 새 레이아웃 구성 요소로 포장할 수 있습니다.

<x-layout>
    @section('scripts')
        <!-- Some JS and styles -->
    @endsection

    @section('content')
      <div>My Page content is here</div>
    @endsection
</x-layout>

이것은 이미 훌륭하지만, 이전 글에서 보듯이, Laravel은 칼날 구성 요소 표시의 모든 내용을 자동으로 저장하는 welcome.blade.php 변수를 제공합니다.따라서 레이아웃을 변경하고 컨텐트 섹션을 생성하는 대신 $slot 변수를 사용합니다.

<!-- /views/components/layout.blade.php -->
<!DOCTYPE html>
<html>
    <head>
        @yield('scripts')
    </head>
    <body>
          {{ $slot }}
    </body>
</html>

더 이상 $slot 명령을 사용하지 않으므로 이제 데이터를 그대로 전달할 수 있습니다.

<x-layout>
    @section('scripts')
        <!-- Some JS and styles -->
    @endsection

  <div>My Page content is here</div>
</x-layout>

좋아, 우리는 내용 부분을 없애고 모든 내용을 레이아웃 구성 요소에 포장했다.이것은 이미 매우 멋있다. 나는 이것이 보기 구성 요소의 가독성을 향상시켰다고 생각한다.들여쓰기 때문에 사용하는 레이아웃을 즉시 명확하게 볼 수 있다.그러나 이 @section 부분은 여전히 나를 괴롭힌다.그래서 이 문제에서 어떻게 벗어날 수 있는지 살펴보자. 여러 가지 선택이 있다.

명명 슬롯
우리의 첫 번째 선택은 '명명 슬롯' 을 사용하는 것이다.구성 요소 HTML의 모든 컨텐트를 자동으로 채우는 scripts 변수에 대해 논의했지만 슬롯 이름을 수동으로 지정할 수도 있습니다.이것은 $slot 라벨을 사용하여 실현할 수 있으며 라벨 자체는 미리 정의된 칼날 구성 요소로 Laravel과 함께 제공된다.x-slot 속성을 name에 전달함으로써 우리는 x-slot 속성과 같은 이름의 변수에서 데이터를 사용할 수 있다.
레이아웃 어셈블리를 수정하여 새 변수name를 사용합니다.

<!-- /views/components/layout.blade.php -->
<!DOCTYPE html>
<html>
    <head>
        {{ $scripts }}
    </head>
    <body>
          {{ $slot }}
    </body>
</html>

이제 이 변수를 뷰에 전달하려면$scripts 슬롯에 전달할 수 있습니다.

<x-layout>
  <x-slot name="scripts">
        <!-- Some JS and styles -->
  </x-slot>

  <div>My Page content is here</div>
</x-layout>

페이지를 새로 고치면 모든 것이 예상대로 진행되는 것을 볼 수 있습니다.단, Google scripts 변수가 현재 Google 레이아웃에 필수적이기 때문에, 보기에서 $scripts 슬롯을 제공하지 않으면 'Undefined variable:scripts' 오류가 발생합니다.
이것은 명명조에 적용되지만, 우리는 더 이상 진정한 '부분' 이 없기 때문에 여러 보기/구성 요소에서 스크립트 부분에 추가할 수 없습니다.
그렇다면 scripts 명령에서 벗어나 하나의 구성 요소로 그것을 실현하고 싶다면?먼저 @section 명령을 레이아웃 어셈블리로 반환합니다.

<!DOCTYPE html>
<html>
    <head>
        @yield('scripts')
    </head>
    <body>
          {{ $slot }}
    </body>
</html>

자, 이제 지령을 사용하지 않은 상태에서 이 부분을 어떻게 사용하는지 봅시다.

렌더링 블레이드 어셈블리 없음
사용자 정의 블레이드 어셈블리를 생성할 때 클래스에는 기본적으로 지정된 어셈블리의 뷰 이름을 포함하는 문자열@yield 메서드가 있습니다.

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public function render()
    {
        return view('components.alert');
    }
}

또 다른 보기로 돌아가는 방법은 호출 가능한 보기로 돌아가서 실제 보기로 돌아가는 것이다.이 예에서, 우리의 구성 요소는 구성 요소가 제공하는 데이터/상태로만 저장되지만, 실제로는 보기로 돌아가지 않습니다. 이것은 우리의 소절 용례에 매우 좋습니다.
따라서 render라는 새 뷰 구성 요소를 만듭니다.

php artisan make:component Section

이제 보기를 되돌리지 않고 함수를 되돌려줍니다. 함수는 Section 명령을 되돌려줍니다.

namespace App\View\Components;

use Illuminate\View\Component;

class Section extends Component
{
    public function render()
    {
        return function ($componentData) {
            return <<<BLADE
                @section("{$componentData['attributes']->get('name')}")
                    {$componentData['slot']}
                @endsection
            BLADE;
        };
    }
}

좋습니다. 이 렌더링 방법을 한 줄 한 줄 분해합시다.@section 방법은 구성 요소 데이터를 포함하는 매개 변수를 가진 호출 가능한 함수를 되돌려줍니다.
이 스토리지에 사용할 수 있는 데이터 및 키는 다음과 같습니다.

render - 구성 요소의 명칭, 우리의 예에서'부분'

componentName - 모든 구성 요소 속성을 저장하는 attributes 실례

Illuminate\View\ComponentAttributeBag - 문자열이 기본 슬롯으로 전달되는 slot 객체
이 호출 가능한 함수에서, 우리는 문자열을 되돌려줍니다. 이 문자열은 PHPS Heredoc Syntax 를 사용하여 뜻을 바꿉니다.
이 문자열에서, 우리는 현재 우리가 원하는 모든 Blade 코드를 되돌릴 수 있습니다. 따라서, 우리의 예에서, 우리는 Illuminate\Support\HtmlString 표시에 제공된 @section 속성을 포함하는 명령을 열 수 있습니다.name 명령어 내부에서 구성 요소의 슬롯을 전달하고 HtmlString 대상이기 때문에 문자열로 변환합니다.
마지막으로 가장 중요하지 않은 것은 섹션 명령을 닫았다는 것입니다.
이 렌더링되지 않은 구성 요소를 사용하기 위해서, 우리는 이렇게 페이지 보기를 다시 쓸 수 있습니다.

<x-layout>
  <x-section name="scripts">
     <!-- Some JS and styles -->
  </x-section>

  <div>My Page content is here</div>
</x-layout>

예. - 해냈어!우리는 추악한 지령에서 벗어나 사용자 정의 칼날 부품을 사용하기 위해 재구성에 성공했다.
이것은 명령을 사용하는 것보다 좋습니까?너는 스스로 결정해야 한다. 그러나 나는 이것이 렌더링이 없는 칼날 구성 요소를 연구하고, 전통적인 레이아웃 확장에 구성 요소를 어떻게 사용하는지 깨우칠 수 있기를 바란다.

Reference

이 문제에 관하여(레이아웃에 Laravel 블레이드 구성 요소 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/beyondcode/using-laravel-blade-components-in-your-layout-541c

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

레이아웃에 Laravel 블레이드 구성 요소 사용

Reference

좋은 웹페이지 즐겨찾기