Laravel コンポーネントとその使用方法

Laravel コンポーネントは、laravel の第 XNUMX バージョンで追加された高度な機能です。 この記事では、コンポーネントとは何か、その作成方法、ブレード モデルでコンポーネントを使用する方法、およびパラメーターを渡すことによってコンポーネントをパラメーター化する方法について説明します。

Laravelコンポーネントとは？

コンポーネントは、任意のテンプレート ブレードで再利用できるコードの一部です。 セクション、レイアウト、インクルードのようなものです。 たとえば、各テンプレートに同じヘッダーを使用するため、再利用できるヘッダー コンポーネントを作成できます。

理解を深めるためのコンポーネントの別の使用法は、ウェブサイトのヘッダー、フッター、またはウェブサイトの他の場所など、多くの場所で登録ボタンを使用する必要があるようなものです. 次に、そのボタンコードのコンポーネントを作成し、それを再利用します.

Laravelでコンポーネントを作成する方法

たとえば、コンポーネントを作成しましょう Header 'でArtisan:

php artisan make:component Header

このコマンドは、laravel プロジェクトに XNUMX つのファイルを作成します。

• という名前の 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 assets フォルダーで、ヘッダー コンポーネントを使用できます。

<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