Laravelではコンポーネントファイルを使って変数を受け渡せます。
これによってテンプレートファイルを使いつつ、ページごとに表示を変えられます。
変数を受け渡す方法を解説していきます。
Laravel コンポーネントを使ってBladeに変数を渡す方法
コンポーネントファイル→ビューファイルに変数を受け渡す方法は次のステップで進めます。
- コンポーネントを定義したファイルで変数を設定
- →コンポーネントファイルに変数を埋め込む
- →各ビューファイルで変数部分の表示を変える
① コンポーネントファイルを作成
下記コマンドでコンポーネントを作成します。
1 |
php artisan make:component Test |
これによって、次の2つのファイルができます。
- app/View/Components に Test.phpファイル
- resources/views/components にtest.blade.phpファイル
②コンポーネントのモデルファイルを編集
先ほど作った app/View/Components/Test.php に次のように入力し、変数を設定します。
1 |
public $title; |
さらにコンストラクタの定義部分に次のように入れます。
1 2 3 4 5 |
public function __construct($title) { $this->title = $title; // $this->menus = $menus; } |
入力後のファイルは次のようになります。
③コンポーネントのテンプレートファイルを編集
$titleという変数を、テンプレートファイル側に埋め込みます。
resources/views/components/test.blade.php に次のように入力します。
1 2 3 |
<div> <h1>このファイルのタイトルは {{$title}} です。</h1> </div> |
④ビュー用のbladeファイルを編集
最後にビュー(表示)用のbladeファイルを準備します。
resources/views フォルダにtrial.blade.phpファイルを作成し、次のように入力します。
1 |
<x-test title="テスト" /> |
ルート設定も忘れずに行っておきます。
routes/web.phpに次のように入れます。
1 2 3 |
Route::get('/trial', function () { return view('trial'); }); |
⑤ページの表示確認
それでは 【 /trial】を開いて、ページを確認してみます。
次のように表示されれば成功!
黄色の蛍光ペン箇所が、 ビュー用のファイルに入れた部分。
1 |
<x-test title="テスト" /> |
title= の後の言葉を変更することで、ページごとに表示を変えられます。
なおcomponentsの基本の使い方はこちらをどうぞ。