Laravel クラスベースのコンポーネント

はじめに

今までは、コンポーネントと、viewを直でつないでいるbladecomponentについて学んでいたが、今回はその間にクラスを挟み込んだコンポーネントクラスを使ったコンポーネントについて学んでいく。

用意するもの

・クラスベースのファイル(TestClassBase.php)

・bladeコンポーネントファイル(component-test2.blade.php)

・classベースのコンポーネントファイル(test2-cladd-base-component.blade.php)

流れ

STEP1

まず、bladeコンポーネントファイルで、クラスベースのファイルを送り先に指定する。

<x-test-class-base classBaseMessage="メッセージです" />

クラスベースのファイル(TestClassBase.php)を送り先に指定。

blade内では、ファイル名が大文字だった場合でも、小文字で表示させる（ケバブケース）

STEP2

次に、送り先のクラスベース(TestClassBase.php)から、classベースのコンポーネントファイル(test2-cladd-base-component.blade.php)
に処理を回す。

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

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.tests.test2-class-base-component');
    }
};

STEP3

classベースのコンポーネントファイル(test2-cladd-base-component.blade.php)で、処理内容を記述する。

<div>
    クラスベースのコンポーネント
    <div>{{ $classBaseMessage }}</div>
    <!-- I have not failed. I've just found 10,000 ways that won't work. - Thomas Edison -->
</div>

クラスベースのコンポーネントという文字と共に、 $classBaseMessageの内容が表示される。
$classBaseMessageの内容は、bladeコンポーネントファイル(component-test2.blade.php)に記述していた”メッセージです”という言葉

結果は以下の通り
無事表示させることが出来た。