TrailheadのLightning Web コンポーネント間の通信を試してみました。
Communicate Between Lightning Web Components | Salesforce Trailhead
子から親へのコミュニーケーション
Controls コンポーネントから Numerator コンポーネントへの通信という形のサンプルアプリケーションを開発します。
Event Comms アプリケーションページを作成
コンポーネントを配置するためのアプリケーションページを作成。ひとまずは枠のみ。
アプリケーションページタブにアクセスできるようにアプリケーションにも追加しておく。
numerator コンポーネントを作成
サンプルコードをコピーして作成。
アプリケーションページに配置する。
controls コンポーネントを作成
さっきと同じ手順で進める。
こんな感じ。js-meta.xmlファイルは編集不要。
numerator コンポーネントのHTML内でcontrols コンポーネントを宣言
この時点でこうなりました。値の連携はまだです。
値連携処理を実装。
controlsのhtmlを加工。
controlsのjsを加工。
numeratorのhtmlを加工。
numeratorのjsを加工。
実装結果。controlsのボタンの処理結果がnumeratorコンポーネントに反映されている感じ。
カスタムバブルを許可
おまけ的な内容です。
手順どおりに進めるとこういう感じになりました。
親から子へのコミュニーケーション
次の内容が重要なポイント。
子コンポーネントのデコレータ@apiはプロパティを公開してパブリックにし、親コンポーネントがプロパティを更新できるようにします。
numerator.jsに@apiを追加する。
augmentorコンポーネントを作成
アプリケーションページの中央領域に配置。このようになります。
あとはパブリック関数を呼び出すとパブリックのゲッターとセッターを使用するのサンプルコードが用意されているので説明どおりに進めます。
パブリック関数
ゲッター・セッター
完成。機能自体に深い意味はありませんがLWC開発の手法を学べるサンプルアプリケーションです。
無関係なコンポーネント間の通信
上で試したのはhtml内で別のコンポーネントを宣言したもの (親子関係) のコンポーネント間通信でした。これは直接の繋がりの内コンポーネント間の連携となります。
messageChannelsフォルダを作成。
最初に以下の作業から実施します。
Visual Studio Code のdefaultのフォルダーに、 messageChannelsという名前のフォルダーを作成します。
その中にCount_Updated.messageChannel-meta.xmlファイルを作成します。
どういう意味かなと最初思ったのですが、force-app/main/defaultフォルダの中に作成するという意味でした。
remoteControlコンポーネントを作成
html,js,meta.xmlと用意します。
counts コンポーネントを作成
アプリケーションページに追加して動かす
右側の領域に配置して動かしてみます。Remote Controlの処理結果がCountsコンポーネントに連携できることを確認できます。
まとめ
こんな感じでコンポーネント間の通信を試すことができました。Trailhead内には以下のリンクも紹介されていたのでこの辺も参考になりそうでした。
