いよいよ自作Webアプリ開発の開発に入っているのだが、コンポーネントの呼び出しで少し時間を取られた。
コンポーネントの呼び出しはHTMLを記述できる方法と、コンポーネントのコードに値（文言）だけを渡して表示する方法の二通りがメジャーらしい。
忘れそうなので、コンポーネントの呼び出しを自分用にメモしておく。
Table of Contents
まずはコンポーネントの作成
見出しのコンポーネントを作っておく。
{{-- もし呼び出し側で h1="..." が渡されなかった場合は、$h~ は null(なにもでてこない)もの として扱う --}}
@props(['h1' => null, 'h2' => null])
@if(!empty($h1))
<h1 class="text-xl font-bold mb-4 border-b border-gray-300 pb-2">
{{ $h1 }}
</h1>
@endif
@if(!empty($h2))
<h2 class="text-xl font-bold mb-4 border-b border-gray-300 pb-2">
{{ $h2 }}
</h2>
@endif呼び出しもと（dashboard.balede.php）からもらった値を表示する。
ちなみに、「@props([‘h1’ => null, ‘h2’ => null])」の部分は②のパターンでのみ使う。
これを呼び出しもとで定義するのだが、二通りのやり方をメモしておく。
①スロットを直接書いて値を渡して表示する方法
HTMLをつけ足すことができるメリットがある。
{{-- slot（スロット）による値渡し。中身にHTMLを含められる --}}
<x-headings.section-heading>
<x-slot name="h2">
お気に入りの掲載（あれば）
</x-slot>
</x-headings.section-heading>②propsで値を渡す方法
スロット直書きの短縮形で、かなり完結にかけるので、見出しなどに使える。
{{-- props（属性）によるシンプルな値渡し --}}
<x-headings.section-heading h2="お気に入りの掲載（あれば）" />propsでの表示は視認性も向上するので、こっちを中心に使っていこうと思う。