<h1 id="blade-components-%E3%81%A8-blade-templates-%E3%81%AE%E9%81%95%E3%81%84">
<a class="header-anchor-link" href="#blade-components-%E3%81%A8-blade-templates-%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> Blade Components と Blade Templates の違い</h1>
<iframe id="zenn-embedded__6ee762bd3c812" src="https://embed.zenn.studio/card#zenn-embedded__6ee762bd3c812" data-content="https%3A%2F%2Fzenn.dev%2Fnunu_nai%2Farticles%2F3baa339243bcec" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://zenn.dev/nunu_nai/articles/3baa339243bcec" style="display:none" target="_blank">https://zenn.dev/nunu_nai/articles/3baa339243bcec</a>
<h1 id="%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> 参考記事</h1>
LaravelのBlade Componentsを使いこなすための基礎 
<iframe id="zenn-embedded__0000c575fca2d" src="https://embed.zenn.studio/card#zenn-embedded__0000c575fca2d" data-content="https%3A%2F%2Freffect.co.jp%2Flaravel%2Flaravel-components" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://reffect.co.jp/laravel/laravel-components" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://reffect.co.jp/laravel/laravel-components</a>
<h1 id="%E5%9F%BA%E6%9C%AC">
<a class="header-anchor-link" href="#%E5%9F%BA%E6%9C%AC" aria-hidden="true"></a> 基本</h1>
テンプレート側
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;

&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;{{ $title }}&lt;/title&gt;
 &lt;link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;p&gt;サイドバーです。&lt;/p&gt;
 {{ $sidebar }}

 {{ $slot }}
&lt;/body&gt;

&lt;/html&gt;
</code></pre></div>view側
<div class="code-block-container"><pre class="language-html"><code class="language-html">// 継承したいテンプレートを`&lt;x-テンプレートのファイル名&gt;&lt;/x-テンプレートのファイル名&gt;`で指定する
&lt;x-app&gt;
&lt;/x-app&gt; 

// 継承したテンプレートの{{ $slot }}に記述を流し込む
&lt;x-app&gt;
 $slotに流し込む記述
&lt;/x-app&gt;

// 継承したテンプレートの{{ $変数名 }}に記述を流し込む
&lt;x-app&gt;
 &lt;x-slot name="変数名1"&gt;
 $変数名に流し込む記述
 &lt;/x-slot&gt;

 &lt;x-slot name="変数名2"&gt;
 $変数名に流し込む記述
 &lt;/x-slot&gt;
&lt;/x-app&gt;
</code></pre></div><h1 id="%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E6%B8%A1%E3%81%97%E6%96%B9">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E6%B8%A1%E3%81%97%E6%96%B9" aria-hidden="true"></a> その他のコンテンツの渡し方</h1>
view側
<div class="code-block-container"><pre class="language-html"><code class="language-html">// タグの属性名に変数名、値に渡すコンテンツを指定する
&lt;x-app&gt;
 &lt;h1 class="text-2xl"&gt;Laravel Components&lt;/h1&gt;
 &lt;x-alert message="これはアラートメッセージです。" /&gt;
&lt;/x-app&gt;
</code></pre></div><div class="code-block-container"><pre class="language-html"><code class="language-html">// Laravel上で定義されている変数を利用する場合は属性値の前に:を付ける
&lt;x-app&gt;
 &lt;h1 class="text-2xl"&gt;Laravel Components&lt;/h1&gt;
 &lt;x-alert :message="$message" /&gt;
&lt;/x-app&gt;
</code></pre></div><div class="code-block-container"><pre class="language-html"><code class="language-html">// テンプレート側
// @propsディレクティブでデフォルト値を設定できる
@props(['message' =&gt; 'このメッセージはデフォルトです。' ])
&lt;div class="flex justify-between p-4 items-center bg-red-500 text-white"&gt;
 &lt;div&gt;{{ $message }}&lt;/div&gt;
 &lt;button&gt;×&lt;/button&gt;
&lt;/div&gt;
</code></pre></div><div class="code-block-container"><pre class="language-html"><code class="language-html">// テンプレート側
// {{}}で動的に変化させる
@props([
 'message' =&gt; 'このメッセージはデフォルトです。',
 'type' =&gt; 'success' 
 ])

&lt;div class="flex justify-between p-4 items-center {{ $type=='success' ? 'bg-green-500' : 'bg-red-500' }} text-white"&gt;
 &lt;div&gt;{{ $message }}&lt;/div&gt;
 &lt;button&gt;×&lt;/button&gt;
&lt;/div&gt;
</code></pre></div><div class="code-block-container"><pre class="language-html"><code class="language-html">// テンプレート側
// @phpディレクティブで動的に変化させる
@props([
 'message' =&gt; 'このメッセージはデフォルトです。',
 'type' =&gt; 'success' 
 ])

@php
 $addClass = 'bg-yellow-500';
@endphp

&lt;div class="flex justify-between p-4 items-center {{ $addClass }} text-white"&gt;
 &lt;div&gt;{{ $message }}&lt;/div&gt;
 &lt;button&gt;×&lt;/button&gt;
&lt;/div&gt;
</code></pre></div>

【laravel初心者】Blade Componentsを知る 1

Blade Components と Blade Templates の違い

Discussion