Laravel 구성 요소는 무엇이며 사용 방법

라라벨 컴포넌트는 라라벨 XNUMX번째 버전에서 추가된 고급 기능입니다. 이 기사에서는 구성 요소가 무엇인지, 어떻게 생성하는지, 블레이드 모델에서 구성 요소를 사용하는 방법 및 매개 변수를 전달하여 구성 요소를 매개 변수화하는 방법을 살펴보겠습니다.

라라벨 컴포넌트란?

구성 요소는 모든 템플릿 블레이드에서 재사용할 수 있는 코드 조각입니다. 섹션, 레이아웃 및 포함과 같은 것입니다. 예를 들어 각 템플릿에 동일한 헤더를 사용하므로 재사용할 수 있는 헤더 구성 요소를 만들 수 있습니다.

더 나은 이해를 위한 구성 요소의 또 다른 사용은 웹 사이트의 머리글, 바닥글 또는 웹사이트의 다른 곳과 같은 여러 위치에서 등록 버튼을 사용해야 하는 것과 같은 것입니다. 그런 다음 해당 버튼 코드의 구성 요소를 만들어 재사용합니다.

Laravel에서 구성 요소를 만드는 방법

예를 들어 구성 요소를 만들어 봅시다. Header 와Artisan:

php artisan make:component Header

이 명령은 laravel 프로젝트에 두 개의 파일을 만듭니다.

• 이름이 있는 PHP 파일 Header.php 디렉토리 내부 app/http/View/Components;
• 이름이 있는 HTML 블레이드 파일 header.blade.php 디렉토리 내부 resources/views/components/.

다음과 같은 하위 디렉토리에 구성 요소를 생성할 수도 있습니다.

php artisan make:component Forms/Button

이 명령은 디렉토리에 버튼 구성 요소를 생성합니다. App\View\Components\Forms 블레이드 파일은 resources/views/components/forms 디렉토리에 배치됩니다.

HTML 블레이드 파일에서 구성 요소를 렌더링하기 위해 다음 구문을 사용합니다.

Laravel 구성 요소의 예

먼저 파일에 HTML 코드를 삽입합니다. header.blade.php 구성 요소의.

<div><h1> Header Component </h1></div>

이제 보기 파일을 만듭니다. users.blade.php 헤더 구성 요소를 사용할 수 있는 자산 폴더에 있습니다.

<x-header /><h1>User Page</h1>

이제 시스템을 통해 라우팅 laravel의 경우 블레이드를 호출하여 브라우저에 결과를 표시합니다.

Laravel 구성 요소에 데이터를 전달하는 방법

구성 요소에 데이터를 전달하려면 Blade 요소 내부의 매개변수와 관련된 값을 지정하는 다음 구문이 사용됩니다. HTML:

<x-header message=”Utenti” />

예를 들어 users.blade.php 파일에서 이전 구성 요소를 사용했습니다.

당신은해야 defiheader.php 파일의 구성 요소 데이터를 마무리합니다. 모든 공용 변수 데이터는 구성요소 보기에 자동으로 사용 가능했습니다.

파일에 코드 추가 app/http/View/Components/ 디렉토리 내의 header.php .

<?php

namespace App\View\Components;
use Illuminate\View\Component;

   class Header extends Component{

   /*** The alert type.** @var string*/

   public $title = "";

   public function __construct($message){

   $this->title = $message;

   }
}

보시다시피 클래스의 생성자 메서드는 변수를 설정합니다. $title 구성요소에 전달된 매개변수 값으로. 이제 변수를 추가하십시오 $title 컴포넌트 파일에서 header.blade.php 과거 데이터를 보여줍니다.

<div> <h1> {{$title}}'s Header Component </h1> </div>

이제 이 전송된 구성 요소 데이터가 브라우저에 표시됩니다.

마찬가지로 다른 시각화 파일을 생성하여 다른 데이터가 있는 다른 시각화 페이지에서 이 구성 요소를 사용할 수 있습니다. blade contact.blade.php 전달 된 데이터를 표시하기 위해 아래 구성 요소 코드를 추가하십시오.

<x-header message=”Contact Us” />

구성 요소에서 CSS 클래스 이름과 같은 추가 HTML 특성을 지정해야 하는 경우가 있으며 직접 추가할 수 있습니다.

<x-header class=”styleDiv” />

Ercole Palmeri