Laravel Blade　コンポーネントにHTMLを埋め込むslotの作り方

こんにちは。LaravelのBladeコンポーネントを作っていて、コンポーネントの中にHTMLを渡して表示させたいと思ったことはありませんか？Bladeコンポーネントのslot機能を使用すると簡単に実現することができます。

slotの概要

slotとはコンポーネントにHTMLを渡すための受け口です。コンポーネント中に{{ $slot }}と記述することで作成します。どのような感じに動作するかを簡単な例を用いて説明します。

slotの実装

作成するコンポーネントの概要

alertメッセージを表示するコンポーネントを作ります。

デザインはbootstrapを使用していますのでCDNでロードするように設定します。メッセージをslotで渡して、任意のHTMLを表示できるようにします。

コンポーネントを実装する

まずはartisan make:componentコマンドでコンポーネントのbladeとモデルを作ります。

$php aritisan make:component Alert

Blade側を編集します。メッセージを表示する部分に{{ $slot }}を記述します。

<div class="alert alert-primary" role="alert">
  {{$slot}}
</div>

コンポーネント側の実装は以上になります。作成したコンポーネントを呼び出してみましょう。

コンポーネントを呼び出す

x-alertタグでコンポーネントを呼び出します。タグ内に打ち込んだHTMLがコンポーネントに定義した {{ $slot }}部分に描画されます。

<x-alert>
    hello world
</x-alert>

HTMLをそのまま渡しているので、改行したり太字にしたりもできます。

<x-alert>
    <span style="font-weight: bold">hello</span><br/> world
</x-alert>

まとめ

コンポーネントにHTMLを渡すことができるslot機能について解説しました。slotを覚えるとコンポーネントで実現できる機能の幅が一気に広がります。個人的にはコンテナ系の機能をコンポーネント化する際によく使うイメージです。

Laravel

Posted by kobainmac