Livewire

完成は↓こちらです。 Laravel と Livewire をインストールして、ライブワイヤーの親子のコンポーネントを作成してみます。 プロジェクト名（oyako2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージをインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/ParentComponent.php イベントをキャッチするには「protected $listeners」に定義します。 ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/ChildComponent.php 親にイベントを送るには「emit()->up()」を使います。 ライブワイヤーをテストするビューを作成します。resources/views/livewire.blade.php routes/web.php にルートを定義します。 これでブラウザでアクセスできるようになりました。 ブラウザでアクセスしてみましょう。 キーボードから子コンポーネントのテキストボックスに何か入力すると、隣と下の文字（「親から値を設定１」）が変わります。子コンポーネントからイベントを発行して、親コンポーネントのプロパティを変更することができました。 今回、子コンポーネントの dehydrateフック でイベントを発行しました。当初は updatedフック でイベントを発行していました。テキストボックスに入力した場合には、updatedフック が呼び出されますが、クリアボタンを押してプロパティを書き換えた場合には、updatedフック は呼び出されません。dehydrateフック でイベントを発行しない場合は、updateフック と clickメソッド でイベント発行しなくてはなりません。

完成は↓こちらです。 Laravel と Livewire をインストールして、ライブワイヤーの親子のコンポーネントを作成してみます。 プロジェクト名（oyako1）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージをインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/ParentComponent.php ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/ChildComponent.php ライブワイヤーをテストするビューを作成します。resources/views/livewire.blade.php routes/web.php にルートを定義します。 これでブラウザから /livewire でアクセスできるようになりました。 ブラウザでアクセスしてみましょう。 キーボードからテキストボックスに何か入力すると、隣の文字（「親から値を設定」）が変わります。子コンポーネントが正しく動作しています。 次に、親コンポーネントで子コンポーネントの値を受け取るにはどうしたらいいのでしょうか？続く・・・

①ライブワイヤーコンポーネントでは IDプロパティ は定義できない。 ②ライブワイヤーコンポーネントで renderメソッド を定義しない場合は、以下のファイルが使われる。 ③ライブワイヤーコンポーネントには、ブレードコンポーネントにはあった {{attributes}} が無い。 ④ライブワイヤーのアクションを実行する前に、JavaScript で確認を入れる書き方。 ⑤ライブワイヤーコンポーネントを動的に作成する場合は、wire:key を設定する。 ⑥ライブワイヤーコンポーネントの表示の仕方。 ↓はPHP7 以降の書き方なので、こちらの方が新しい。 ↓は過去の書き方。 ⑦ライブワイヤーコンポーネントのプロパティを設定する。 ⑧JavaScript でライブワイヤーコンポーネントのプロパティを設定する。 ⑨JavaScript でフォームの値を変更した場合にライブワイヤーコンポーネントのプロパティを更新するには、フォームで inputイベント を発生させる。 ⑩ライブワイヤーコンポーネントは formタグ で囲む必要はない。 ⑪JavaScript からはコンポーネントを find することはできるが、Componentクラス からは find することはできない。 ⑫JavaScript からは任意のコンポーネントのメソッドを呼び出すことはできるが、Componentクラス からは find できないので、任意のコンポーネントのメソッドを呼び出すことはできない。全体に向けて、イベントを送ること（emit）はできる。

ライブワイヤーコンポーネント（クラス）を作成していた。画面を表示したところ、以下のエラーが表示された。

完成は↓こちらです。 Laravel と Livewire をインストールして、カウンターのサンプルプログラムを作成してみます。 インストール時にプロジェクト名のディレクトリが作成されます。 ↓下のメッセージが表示されてインストールは終わります。 Laravel のインストールはここまで。 次の 2つ のファイルが生成されます。app/Http/Livewire/Counter.php resources/views/livewire/counter.blade.php ※因みに、render メソッド を定義しなくても livewire.counter は呼び出されます。 ※Livewire コンポーネントには単一のルート要素（<div>）が必要です。 ①<livewire:styles />、<livewire:scripts /> を配置します。②コンポーネントは <livewire:some-component /> で配置します。↓のように @livewireStyles と @livewireScripts。コンポーネントを @livewire で配置することもできます。@マークの方が旧の書き方です。 ブラウザで確認してみましょう。 生成された counterコンポーネント のクラスとビューを次のように置き換えます。app/Http/Livewire/Counter.php resources/views/livewire/counter.blade.php ブラウザでページをリロードすると、レンダリングされた counterコンポーネント が表示されます。「+」ボタンをクリックすると、ページをリロードせずにページが自動的に更新されます。JavaScript を１行も書いていません。マジックです！