ラボ > Laravel、Lumen：基本、views関連

Laravel8 ビューの雛形に値を渡したい（Blade Components）

メインになるビューじゃなくて雛形のほうに値を渡したい

作成日:2022-12-22, 更新日:2023-07-03

基本

▼ひとまずこんな状態
Laravel8 「Blade Components」ってヤツとview周り: ひとまずハローワールド

やりたいこと

  • titleタグの中身をページごとに変更させる: テキストを渡す
  • titleタグの中身をページごとに変更させる: 変数を渡す

設定

共通設定: app/View/Components/〇〇〇Layout.php

「app/View/Components/CommonLayout.php」を修正する必要があるっぽい

▼メンバ変数の設定（※設定例のため、titleタグ・h1タグに値を渡す感じにする）

～ 省略 ～
class CommonLayout extends Component
{
    public $title;
    public $h1;

    ～ 省略 ～

    public function __construct($title,$h1)
    {
        $this->title = $title;
        $this->h1 = $h1;
    }

～ 省略 ～

※使いたい変数を全部追加する必要があるっぽい

共通設定: resources/views/components/〇〇〇-layout.blade.php

「resources/views/components/common-layout.blade.php」を修正

▼titleタグ・h1タグ（以前のファイルにh1を追加）

～ 省略 ～
	<title>{{ $title }}</title>
    ～ 省略 ～
	<h1>{{ $h1 }}</h1>
    ～ 省略 ～

titleタグの中身をページごとに変更させる: テキストを渡す

▼対象ファイルの修正: resources/views/HelloWorld.blade.php

<x-common-layout title="あいうえお" h1="さしすせそ">
～ 省略 ～

titleタグの中身をページごとに変更させる: 変数を渡す

コントローラで値を渡してもらっているとする…

▼対象ファイルの修正: resources/views/HelloWorld.blade.php

<x-common-layout :title="$title" :h1="$h1">
～ 省略 ～

変数が配列

<x-common-layout :title="$hoge['foo']" :h1="$hoge['bar']">
～ 省略 ～

変数が配列で配列を渡す

<x-common-layout :title="$hoge_many" :h1="$piyo_many">
～ 省略 ～

▼雛形のほうは下記のような感じ

～ 省略 ～
	<title>{{ $title['foo'] }}</title>
    ～ 省略 ～

属性として渡したい

class属性やその他もろもろをそのまま渡したいとき
→「共通設定: app/View/Components/〇〇〇Layout.php」で設定しないものはそのまま使える

<x-common-layout :title="$title" :h1="$h1" class="hogepiyo" style="color:red;">
～ 省略 ～

▼雛形のほうは下記のような感じ

～ 省略 ～
	<h1 {{ $attributes }}>～ 省略 ～</h1>
    ～ 省略 ～

※「<h1 class="hogepiyo" style="color:red;">」となる

変数も渡せる

<x-common-layout :title="$title" :h1="$h1" :class="$hoge">
～ 省略 ～

関連項目