{video} 細かに説明したスクリーンキャストを用意している、Livewireに驚いてください。
インラインコンポーネント
ページ上にLivewireコンポーネントをレンダーする最も基本的な方法は、
<livewire:タグ構文を使用することです。<div> <livewire:show-posts /> </div>もしくは、
@livewireBladeディレクティブを使用することもできます。@livewire('show-posts')独自の名前空間を持つサブフォルダー内にコンポーネントがある場合は、名前空間のプレフィックスとしてドット（
.）を使用する必要があります。たとえば、
app/Http/Livewire/Navフォルダ内にShowPostsコンポーネントがある場合は、以下のように指定します。<livewire:nav.show-posts />パラメータ
パラメータの指定
<livewire:タグに追加のパラメータを指定することで、データをコンポーネントに渡せます。たとえば、
show-postコンポーネントがあるとします。$postモデルを渡す方法は次のとおりです。<livewire:show-post :post="$post">もしくは、以下のようにBladeディレクティブを使用してパラメーターを渡します。
@livewire('show-post', ['post' => $post])パラメータの受け取り
Livewireはパラメータを一致するパブリックなプロパティへ自動的に割り当てます。
たとえば、
<livewire:show-post :post="$post">の場合、show-postコンポーネントに$postという名前のパブリックプロパティがあれば、自動的に割り付けます。class ShowPost extends Component { public $post; ... }何らかの理由でこの自動動作がうまく機能しない場合は、
mount()メソッドを使用し、パラメータをインターセプトできます。class ShowPost extends Component { public $title; public $content; public function mount($post) { $this->title = $post->title; $this->content = $post->content; } ... }{tip} 皆さんおなじみのクラスコンストラクター
__construct()の代わりに、Livewireコンポーネントではmount()を使用します。コントローラーと同様に、タイプヒントのパラメーターを前に追加することにより、依存関係を注入できます。
use \Illuminate\Session\SessionManager; class ShowPost extends Component { public $title; public $content; public function mount(SessionManager $session, $post) { $session->put("post.{$post->id}.last_viewed", now()); $this->title = $post->title; $this->content = $post->content; } ... }フルページコンポーネント
ページのメインコンテンツがLivewireコンポーネントである場合、コントローラーであるかのようにコンポーネントをLaravelのルートへ直接渡せます。
Route::get('/post', ShowPosts::class);デフォルト動作としてLivewireは、
ShowPostsコンポーネントをresources/views/layouts/app.blade.phpにあるBladeレイアウトコンポーネントの{{ $slot }}へレンダーします。<head> @livewireStyles </head> <body> {{ $slot }} @livewireScripts </body>Laravelコンポーネントの詳細は、Laravelのドキュメント（日本語訳）を参照してください。
レイアウトコンポーネントの設定
layouts.app以外のデフォルトレイアウトを指定したい場合は、livewire.layout設定オプションをオーバーライドします。'layout' => 'app.other_default_layout'よりコントロールが必要なら、
render()から返すビューインスタンス上で、->layout()メソッドを使用します。class ShowPosts extends Component { ... public function render() { return view('livewire.show-posts') ->layout('layouts.base'); } }コンポーネントでデフォルト以外のスロットを使用している場合は、
->slot()をチェーンすることもできます。public function render() { return view('livewire.show-posts') ->layout('layouts.base') ->slot('main'); }他にもLivewireは、
@extendsを使用した従来のBladeレイアウトファイルの使用をサポートしています。以下のレイアウトファイルがあるとします。
<head> @livewireStyles </head> <body> @yield('content') @livewireScripts </body>これを参照するようにLivewireへ指定するには、
->layout()の代わりに->extends()を使います。public function render() { return view('livewire.show-posts') ->extends('layouts.app'); }コンポーネントが使用する
@sectionを指定する必要がある場合は、->section()メソッドを使用し、指定できます。public function render() { return view('livewire.show-posts') ->extends('layouts.app') ->section('body'); }コンポーネントからレイアウトにデータを渡す必要がある場合は、layoutメソッドでデータを渡せます。
public function render() { return view('livewire.show-posts') ->layout('layouts.base', ['title' => 'Show Posts']) }ルートパラメータ
多くの場合、コントローラーメソッド内のルートパラメーターにアクセスする必要があります。コントローラを使用しないため、Livewireは
mountメソッドを使用してこの動作を模倣します。例をご覧ください。Route::get('/post/{id}', ShowPost::class);class ShowPost extends Component { public $post; public function mount($id) { $this->post = Post::find($id); } ... }ご覧のとおり、Livewireコンポーネント中の
mountメソッドは、パラメーターに関する限りコントローラーメソッドのように機能します。/post/123にアクセスすると、mountメソッドに渡した$id変数には値として123が入ります。ルートモデルの結合
ご期待のとおり、Livewireコンポーネントはルートモデルの結合などコントローラーが使用しているすべての機能を実装しています。一例をご覧ください。
Route::get('/post/{post}', ShowPost::class);class ShowPost extends Component { public $post; public function mount(Post $post) { $this->post = $post; } }PHP7.4を使用している場合は、クラスプロパティをタイプヒントすることもでき、Livewireは自動的にルートモデルを結合します。以下のコンポーネントの
$postプロパティは、mount()メソッドを必要とせず、自動的に挿入されます。class ShowPost extends Component { public Post $post; }Renderメソッド
Livewireコンポーネントの
renderメソッドは、ページの初回読み込み時、「ならびに」それ以降のコンポーネントの更新時に毎回呼び出されます。{tip} 単純なコンポーネントでは、
renderメソッドを自分で定義する必要はありません。基本のLivewireコンポーネントクラスには、動的なrenderメソッドが含まれています。Bladeビューを返す
render()メソッドはBladeビューを返すことが期待されているため、コントローラーメソッドの作成と比較できます。以下に例を紹介します。{note} Bladeビューには、確実にルート要素を１つだけ入れてください。
class ShowPosts extends Component { public function render() { return view('livewire.show-posts', [ 'posts' => Post::all(), ]); } }<div> @foreach ($posts as $post) @include('includes.post', $post) @endforeach </div>テンプレート文字列を返す
Bladeビューに加え、オプションとして
render()からBladeテンプレート文字列を返せます。class DeletePost extends Component { public Post $post; public function delete() { $this->post->delete(); } public function render() { return <<<'blade' <div> <button wire:click="delete">Delete Post</button> </div> blade; } }{tip} 上記のようなインラインコンポーネントの場合、作成時に
--inlineフラグを使用する必要があります。ʻartisan make:livewire delete-post --inline`