Laravel と Livewire をインストールして、親と子のコンポーネントで複数のプロパティをバインディングして同期されるかを確認 プロジェクト名(oyako5)を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 LiveRelationトレイト を作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/ParentComponent.php ライブワイヤーの親コンポーネントのビューを作成します。resources/views/livewire/parent-component.blade.php ↑のポイントは5行目の「bind=”counter1,counter2″」です。ここで 親コンポーネントの counter1とcounter2のプロパティを子コンポーネントのプロパティ を紐づけています。 ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/ChildComponent.php ライブワイヤーの子コンポーネントのビューを作成します。resources/views/livewire/child-component.blade.php ↑のポイントは3,4行目でcounter を defer にしています。5行目でリフレッシュさせて同期させています。 public/liveext.js を作成します。 resources/views/index.blade.php を作成します。 routes/web.php にルートを定義します。 ブラウザでアクセスしてみましょう。 COUNTER1 と COUNTER2 に値をいれて、リフレッシュボタンを押すと、バインディングされた親のコンポーネントの COUNTER1 と COUNTER2 が同期されます。