Laravel と Livewire をインストールして、LiveRelationトレイトを使う手順。 プロジェクト名（oyako4）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 今回のメイン。LiveRelationトレイト を作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/Counter.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの親コンポーネントのビューを作成します。resources/views/livewire/counter.blade.php ↑のポイントは２行目の「bind=”count2:count”」です。ここで 親コンポーネントの count2プロパティ と 子コンポーネントの countプロパティ を紐づけています。 ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/Child.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの子コンポーネントのビューを作成します。resources/views/livewire/child.blade.php ↓下は旧書き方です。@this.increment で Livewire.data() を渡しています。 ↑のポイントは２行目の「bind=”count”」です。ここで 子コンポーネントのcountプロパティ と 孫コンポーネントのcountプロパティ を紐づけています。 ライブワイヤーの孫コンポーネントを作成します。app/Http/Livewire/GrandChild.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの孫コンポーネントのビューを作成します。resources/views/livewire/grand-child.blade.php ↑孫コンポーネントはプロパティの紐づけはしません。 public/liveext.js を作成します。 resources/views/index.blade.php を作成します。

Laravel と Livewire をインストールして、アクション、$emit、$emitSelf の動作の違いについて確認する手順。 プロジェクト名（liveevent2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、eventコンポーネント を生成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/Event.php resources/views/index.blade.php を作成します。 routes/web.php にルートを定義します。 ブラウザでアクセスして、動作の違いを確認してみましょう。

Laravel と Livewire をインストールして、LiveRelationトレイトを使う手順。 プロジェクト名（oyako3）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 今回のメイン。LiveRelationトレイト を作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/Counter.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの親コンポーネントのビューを作成します。resources/views/livewire/counter.blade.php ↑のポイントは２行目の「bind=”count2:count”」です。ここで 親コンポーネントのcount2プロパティ と 子コンポーネントのcountプロパティ を紐づけています。 ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/Child.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの子コンポーネントのビューを作成します。resources/views/livewire/child.blade.php ↑のポイントは２行目の「bind=”count”」です。ここで 子コンポーネントのcountプロパティ と 孫コンポーネントのcountプロパティ を紐づけています。 ライブワイヤーの孫コンポーネントを作成します。app/Http/Livewire/GrandChild.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの孫コンポーネントのビューを作成します。resources/views/livewire/grand-child.blade.php resources/views/index.blade.php を作成します。 routes/web.php にルートを定義します。 ブラウザでアクセスしてみましょう。 孫コンポーネントのテキストボックスに何か入力すると、「子のプロパティ」と「親のCOUNT2」のプロパティを変更することができます。

完成系は↓これです。 Laravel と Livewire をインストールして、コンポーネントID を使って Livewire.find をする方法 プロジェクト名（find）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージをインストールします。 次のコマンドを実行して、counterコンポーネント を生成します。 次の 2つ のファイルが生成されます。app/Http/Livewire/Counter.php resources/views/livewire/counter.blade.php ※因みに、render メソッド を定義しなくても livewire.counter は呼び出されます。 生成された counterコンポーネントのクラスを次のように置き換えます。app/Http/Livewire/Counter.php counterコンポーネント のビューを書き換えます。resources/views/livewire/counter.blade.php テンプレートファイル（index.blade.php）を作成します。resources/views/index.blade.php routes/web.php にルートを追加します。 ブラウザで確認します。 「ログ出力」ボタンを押すとブラウザログに コンポーネントＩＤ とカウントの値が表示されます。