{{ $title }} に値を代入するために、 <x-slot> タグで囲むのはなぜですか？
ユーザー
{{ $title }} に値を代入するために、<x-slot>タグで囲む理由を知りたいです。
まずは、これまでの学習をそもそも理解できているのか確認したいので、流れを書かせてください。
layout.blade.phpには、index.blade.phpとshow.blade.phpにおける共通部分を記述しますよね。
一方、containerクラス内はファイルによって異なるデータを入れたいので{{ $slot }}と書いてあります。
// layout.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>{{ $title }}</title>
<link rel="stylesheet" href="{{ url('css/style.css') }}">
</head>
<body>
<div class="container">
{{ $slot }}
</div>
</body>
</html>
その後、index.blade.phpとshow.blade.phpでは、<x-layout>タグで囲んでいます。
タグ内では{{ $slot }}の中身を記述しています。
この一連の流れは、
「layout.blade.phpの中身をココでも使うけど、それ以外は<x-layout>タグ内に書き込んでね〜」
という意味で捉えています。
さらに、<title>タグ内でも異なる表記をさせるため、
layout.blade.phpにて{{ $title }}という変数を追加しましたよね。
ここまではなんとなく理解できていると思います。
ただ、そのあとの<x-slot name="title">が理解できていません。
<x-slot>タグで囲み、name属性を指定することで、
layout.blade.phpの{{ $title }}に好きな値を埋め込めるのはわかります。
また、{{ $title }}は違う名前にできるのに{{ $slot }}は変えられませんでした。
このことからlayout.blade.phpにおいて{{ $slot }}という表記は必須だと思います。
とはいえ{{ $slot }}はlayout.blade.php内で一部分を表すものに過ぎないと認識しています。
つまり、<layout>タグは「全体」を表すようなものになんとなく思えるのですが、
{{ $slot }}はlayout.blade.phpにおいて「一部分」しか担っていないように見えます。
それなのになぜ、 <x-slot name="title">と囲まなくてはならないのか想像が難しかったです。
<x-title>とはならないんだなぁと不思議です。
一体x-slotと{{ $title }}にどんな関係があるのか気になります。
質問の意図が伝わらなかったら申し訳ありません。
<x-slot>タグで囲み、name属性を指定するワケを教えていただけると理解の助けになります。
ご回答よろしくお願いいたします。
この回答を見るにはプレミアムプランへの登録が必要です
プレミアムプランとは？
3分動画でマスターできるプログラミング学習サービスです。あなたもプログラミングを始めてみませんか？
Copyright © 2011-2024 dotinstall.com. All Rights Reserved.