今回は実際に業務で使用した@slotと@componentの使い方を備忘録としてメモします。
継承を利用したレイアウトでは、親レイアウトの必要な部分に子側のセクションをはめ込んで表示ができますが、時には「部分を切り離して作成し、組み込みたい」ということもあるでしょう。例えば、タイトルやフッターの表示などは、それぞれ表示した部品として用意しれおければとても便利です。
コンポーネント(@component)とは
コンポーネントとは、1つのテンプレートとして独立して用意されるレイアウトの部品です。コンポーネントは、テンプレートから読み込まれ、必要な場所に組み込まれます。
コンポーネントといっても、書き方は普通のテンプレートと相違ありません。作成されたコンポーネント(@component)というディレクティブを使用して表示場所を設定します。
コンポーネントの組み込み
|
1 2 3 4 5 6 7 8 |
@component(Sample) --- --- 表示したい内容 (コンポーネント) --- --- @endcomponent |
冒頭のコンポーネントの(Sample)は、「Vies」フォルダにあるファイル名で指定されます。例えば、「components」フォルダ内に「test.blade.php」というファイル名が用意されている場合、(components.test)と設定すれば読み込むことができます。
スロット(@slot)とは
コンポーネントで変数を使用するには、これらの変数に値を渡さなければなりません。
それを可能にしているのが、スロット(@slot)です。スロットは{{ }}で指定された変数に値を設定するためのものです。
記述方法は以下です。
|
1 2 3 4 5 6 7 8 |
@slot(Sample) --- --- 設定する内容 (スロット) --- --- @slot |
@componentと@slotの使い方
では、実際にコンポーネントとスロットを作成してみましょう。「views」フォルダの中に「sample」というフォルダを用意し、この中にコンポーネントを用意します。
「sample」フォルダを作成後、その中に「text.blade.php」という名前でファイルを作成してください。そこに下記を記述してください。
|
1 2 3 4 5 |
<div class="message"> <p>コンポーネントの中身</p> <p class="title">{{$title}}</p> <p class="content">{{$content}}</p> </div> |
そして、このコンポーネントを読み込むためのテンプレートに下記を記述してください。
|
1 2 3 4 5 6 7 8 9 |
@component('sample.text') @slot('title') タイトルを表示します。 @endslot @slot('content') 文章を表示します。 @endslot endcomponent |
これで無事使用することができましたね。
まとめ
コンポーネントは1つずつゆっくりと確認していけばとっつきやすいでしょう。
- コンポーネントの中身を表示することができるか
- スロット(@slot)でデータを渡すことができているか
