LWC – イベント

出力：

次に、Salesforce 組織に移動し、親コンポーネントを「レコード」ページに配置します。

親コンポーネントの中に 2 つの子コンポーネントが存在することがわかります。

Child 1 コンポーネントの下の入力テキストにテキストを入力してみましょう。親コンポーネントではテキストが大文字で表示されていることがわかります。

Child 2 コンポーネントの下の入力テキストにテキストを入力します。親コンポーネントではテキストが小文字で表示されていることがわかります。

一度に両方のテキストを入力することもできます。

パブリッシュサブモデル

独立したコンポーネント (相互に関連していない) を操作する場合、およびあるコンポーネントから別のコンポーネントに情報を送信する場合は、このモデルを使用できます。 PubSub はパブリッシュとサブスクライブの略です。データを送信するコンポーネントはパブリッシャと呼ばれ、データを受信するコンポーネントはサブスクライバと呼ばれます。コンポーネント間でイベントを送信するには、pubsub モジュールを使用する必要があります。これはすでに事前定義されており、Salesforce によって提供されています。ファイル名はpubsubです。 LWC コンポーネントを作成し、JavaScript ファイル「pubsub.js」にこのコードを入力する必要があります。

例：

Publish と Subscribe という 2 つのコンポーネントを作成しましょう。

パブリッシュでは、ユーザーが入力テキストを作成できるようにします。ボタンをクリックすると、Subscribe コンポーネントではデータが大文字と小文字で受信されます。

.js を公開する

このコードを JSON ファイルに埋め込みます。ここでは情報を取得し、情報を公開します。

information 変数は大文字、information1 は小文字になります。コードの先頭にこの import ステートメントを必ず含めてください (「c/pubsub」から pubsub をインポートします)。

次のようになります。

公開.html

まず、ハンドラー情報を含むテキストを受け入れるための lightning-input を作成します。その後、onclick 機能を使用してボタンが 1 つ作成されます。これらの関数は、前の「js」コード スニペットに含まれています。

購読.js

このコードを JSON ファイルに埋め込みます。ここでは、まず callSubscriber() メソッド内で情報を大文字と小文字に別々に変換して情報をサブスクライブします。その後、connectedcallback() メソッドを通じてこのメソッドを呼び出します。コードの先頭にこの import ステートメントを必ず含めてください (「c/pubsub」から pubsub をインポートします)。

次のようになります。

購読する.html

テキストは大文字 (information に保存) と小文字 (information2 に保存) で表示します。

出力：

これら 2 つのコンポーネントをページに追加します。両方のコンポーネントが同じページにあることを確認してください。そうしないと、機能が動作しません。

「Publish」コンポーネントにテキストを入力し、「Send Data」ボタンをクリックしてみましょう。テキストが大文字と小文字で受信されていることがわかります。

結論

これで、Salesforce LWC のイベント概念を通じて LWC コンポーネントと通信できるようになりました。このガイドの一環として、親から子へ、そして子から親へコミュニケーションを図る方法を学びました。 PubSub モデルは、コンポーネントが互いに関連していない (親と子ではない) 場合に使用されます。各シナリオは簡単な例で説明されており、このガイドの冒頭で提供されているコードを「meta-xml」ファイルに必ず含めてください。