top of page

【LWC】コンポーネント間のデータの受け渡し方法　その①同一コンポーネント間の場合



コンポーネント間のデータ通信（データ受け渡し）は、

主に下記の２パターンがありますが、 今回は、「同一コンポーネント間のデータ通信」について記載しています。


＜LWCでのコンポーネント間のデータ通信方法＞

  1. 同一コンポーネント間のデータ通信

  2. 別コンポーネント間のデータ通信


１．同一コンポーネント間のデータ通信について

データ通信の際には、以下の点にご注意ください。 特に、親⇔子で引き渡し方法が異なるので注意が必要です。 【注意点】

  • データの反映は、親（CMP01） → 子コンポーネント（CMP02）の一方通行で構築していく方がトラブルは少なくなります ※理由は後述のコードを参照いただく事で納得いただけるかと思います

  • 子コンポーネントでは、変数に値をセットしない → 連携が切れてしまいます

  • 親から子へのコンポーネントへの通信は、パブリックプロパティ・パブリックメソッドを利用します

  • 子から親へのコンポーネントへの通信は、カスタムイベントを利用します

 

まずは、実際に構築したコンポーネントですが、 以下は、どの入力欄に入力しても同じ文字が表示される、簡単なサンプルPGです。

＜画面イメージ＞

各コンポーネントの内容は以下になります（実際のコンポーネントの範囲とは異なります）。 どの入力欄に文字を入力しても、入力欄と赤枠に同じ文字を表示するシンプルな作りになっています。

以下にソースを添付します。説明はこの後に記載しています。

＜親CMPソース：parentLwcCmp＞

・parentLwcCmp.html

・parentLwcCmp.js

・parentLwcCmp.js-meta.xml

＜子CMPソース：childLwcCmp＞ ※childLwcCmp.js-meta.xmlは、初期値のままにつき記載しません。

・childLwcCmp.html

・childLwcCmp.js

＜孫CMPソース：grandchildLwcCmp＞ ※grandchildLwcCmp.js-meta.xmlは、初期値のままにつき記載しません。

・grandchildLwcCmp.html

・grandchildLwcCmp.js

全体的な動作は、以下の通りになります。

以下の点に留意しながらソースをご覧ください。

  1. 実際の入力値は、oyaValという親CMPにて宣言されている変数が全てのベースとなります。子と孫CMPは、@apiデコレーターにて変数を設定しており、基本直上のCMPから値を受け継いでいきます。

  2. 子、孫CMPから入力値を渡す場合は、カスタムイベントを利用しますが、渡せるのは直上のCMPのみとなります。孫CMPから値を渡す場合は、子CMPを経由する必要があります。

では、詳細（親CMPと、子CMPのやり取り）を見ていきます。

連携の設定はHTMLにて記載されています。親CMPの14～17行目を見ていきます。

①は、親CMP の oyaVal を子CMPの koVal へ値を渡しています。

子のCMPで受け取る変数には、@apiのデコレーターを追加する必要が有ります

変数名を子CMPから持ってくる場合、大文字→ハイフン＋小文字に置換して記述する必要が有ります。

②は、子CMP→親CMPに値を渡すためのカスタムイベントとなります。

イベント名”onkochg” → ”kochg”が子CMPでのイベント時の引数となります。

親に値を渡す場合は、オブジェクト変数にて"detail"に値をセットする必要が有ります。→ 親では、”event.detail”にて取得可能となります（parentLwcCmp.jsの8行目参照）。

以下、説明文を入れた子CMPの”childLwcCmp.js”を表示します。

注意すべきは、孫から変更値を受け取る"chukeiOya()"にて、孫CMPにて変更があった分を、親CMPに送信している点です。

直接孫CMP → 親CMPへの通信は出来ませんのでご注意ください。

また、子CMPの”koVal”、孫CMPの”magoVal”には、値をセットしない点もご注意ください。

以上となります。

親子のCMPでの通信については他のサイトでの記載が多かったので、ここでは親子孫の例を紹介してみました。

基本、親CMPでの変数は、親で変更するようにコーディングしてもらうと余計なトラブルを回避できます。

Σχόλια

bottom of page