ごちゃごちゃするのでざっくりまとめる！
viewを使いまわしたい時、大きく分けて2つのアプローチがある
- コンポーネント ← こっちの方が後から出てきた。
- クラスベース
- 匿名コンポーネント
- @includeなどをつかって別のviewの読み込み
目次
コンポーネント
クラスベースコンポーネント
php artisan make:component コンポーネント名を叩く。resources/views/componentsとapp/View/Componentsディレクトリにファイルが生成される。
componentsの中にもっとディレクトリを入れ子にしたい場合は、php artisan make:component ディレクトリ名/コンポーネント名を叩く。すると、resources/views/components/ディレクトリ名app/View/Components/ディレクトリ名に生成される。
app/View/Componentsにできるファイルが クラスになっていて、render()でresource/componentsに格納されているviewを返却している。
匿名コンポーネント
クラスベースコンポーネントのクラスがないバージョン。resources/views/components ディレクトリにファイルを入れる。コマンドの場合は、php artisan make:component コンポーネント名 --view。
共通
呼び出し方は共通。
<x-コンポーネント名 /> componentディレクトリからさらに入れ子になっているコンポーネントの場合は、<x-ディレクトリ名.コンポーネント名 />
データを渡したい時
コンポーネント側でデータを入れたい部分に、$slotを置く。イメージ
resources/views/Components/layout.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{ asset('/styles/app.css') }}">
<title>{{ $title ]}</title>
</head>
<body>
{{ $slot }}
</body>
</html> 呼び出し側
<x-layout>
<x-slot:title>ページタイトル</x-slot>
<h1>ほげほげ</h1> ← slotと明示していない部分が$slot部分にレンダリングされる
</x-layout>includeなどをつかって別のviewの読み込み
これがもとからあるやり方。
12/22(金)追記予定
参考
あわせて読みたい
コメント