Laravel コンポーネントを使ってBladeに変数を渡す方法

Laravel テンプレート・リンク

2020.09.23 2020.09.22

Laravelではコンポーネントファイルを使って変数を受け渡せます。

これによってテンプレートファイルを使いつつ、ページごとに表示を変えられます。

変数を受け渡す方法を解説していきます。

コンポーネントファイル→ビューファイルに変数を受け渡す方法は次のステップで進めます。

下記コマンドでコンポーネントを作成します。

php artisan make:component Test

1	php artisan make:component Test

これによって、次の2つのファイルができます。

先ほど作った app/View/Components/Test.php に次のように入力し、変数を設定します。

public $title;

1	public $title;

さらにコンストラクタの定義部分に次のように入れます。

    public function __construct($title)
    {
        $this->title = $title;
        // $this->menus = $menus;
    }

public function __construct($title)

{

$this->title = $title;

// $this->menus = $menus;

}

入力後のファイルは次のようになります。

$titleという変数を、テンプレートファイル側に埋め込みます。

resources/views/components/test.blade.php に次のように入力します。

<div>
    <h1>このファイルのタイトルは {{$title}} です。</h1>
</div>

<div>

<h1>このファイルのタイトルは {{$title}} です。</h1>

</div>

最後にビュー（表示）用のbladeファイルを準備します。

resources/views フォルダにtrial.blade.phpファイルを作成し、次のように入力します。

<x-test title="テスト" />

1	<x-test title="テスト" />

ルート設定も忘れずに行っておきます。

routes/web.phpに次のように入れます。

Route::get('/trial', function () {
    return view('trial');
});

Route::get('/trial', function () {

return view('trial');

});

それでは【 /trial】を開いて、ページを確認してみます。

次のように表示されれば成功！

黄色の蛍光ペン箇所が、ビュー用のファイルに入れた部分。

<x-test title="テスト" />

1	<x-test title="テスト" />

title= の後の言葉を変更することで、ページごとに表示を変えられます。

なおcomponentsの基本の使い方はこちらをどうぞ。