子コンポーネントの作成と操作
前のステップで、コードベースが拡大しました。熊リストコンポーネントをいくつかの小さなコンポーネントにリファクタリングしましょう。熊タイルのコードを新しいコンポーネントに移動します。
Bear Tile (熊タイル) コンポーネントを作成する
- VS Code で、
lwc
フォルダーを右クリックして [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] をクリックします。 - コンポーネントに「
bearTile
」と名前を付けます。 -
bearList.html
を開き、<!-- Start bear tile -->
と<!-- End bear tile -->
の間にあるコードをすべて切り取ります。 -
bearTile.html
のtemplate
タグ内にコードを貼り付けます。完了したら、bearTile.html
は次のようになります。 -
bearTile.js
の内容を次に置き換えます。@api
でデコレートされたbear
プロパティを追加しました。これで、bear
プロパティが任意の親コンポーネントに公開されます。 -
bearList.css
を削除します。 -
bearTile
ディレクトリに新しいbearTile.css
ファイルを作成し、そのファイルに次のコードを貼り付けます。 -
bearList.html
を開き、<!-- Start bear tile -->
コメントと<!-- End bear tile -->
コメントの間のコンテンツを<c-bear-tile bear={bear}></c-bear-tile>
に置き換えます。完了したら、bearList.html
は次のようになります。 これは、前のステップで定義したbear
属性を持つ熊タイルコンポーネントを参照します。コンポーネントフォルダーやファイルにはbearTile
という名前が付いていますが、追加したタグはc-bear-tile
です。先頭のc
はデフォルトの名前空間を表し、それにコンポーネント名が小文字で追加され、大文字だった部分がダッシュで区切られています。 - 更新したコードを組織にリリースし、新しいリストコンポーネントをテストします。わずかに傾斜をつけると見た目が良くなります。
Bear List (熊リスト) コンポーネントを操作する
レンジャーは、ホームページから移動せずに、熊レコードをすばやく参照して編集できる機能を求めています。熊タイルをクリック可能にし、編集可能な熊レコードフォームを開きましょう。
-
bearTile.html
を編集して、<lightning-card title={bear.Name} class="bear-tile">
タグの後に次のコードを追加します。handleOpenRecordClick
関数を起動する編集ボタンを追加しました。このボタンは、actions
スロットを使用して Lightning カードに配置されます。スロットは、親コンポーネントがコンポーネントの body に渡すマークアップのプレースホルダーです。 -
bearTile.js
を編集して、最後の終了ブラケットの前に次の関数を追加します。 コードのポイント:- ユーザーが熊タイルのレコードを開くボタンをクリックすると、
handleOpenRecordClick
関数がコールされます。 - この関数は、熊レコード ID を保持する
bearview
カスタムイベントを作成して起動します。
- ユーザーが熊タイルのレコードを開くボタンをクリックすると、
-
bearList.html
を編集して、onbearview={handleBearView}
属性をc-bear-tile
タグに追加します。これで、タイルコンポーネントによって起動されるbearview
イベントを取得できます。このイベントは、handleBearView
関数で処理されます。
-
bearList.js
の内容を次に置き換えます。 コードのポイント:- ナビゲーションを処理するユーティリティ関数をバンドルするナビゲーション mixin をインポートします。mixin によって、拡張せずにクラスに機能を追加できます。これは、クラスがすでに親クラスを拡張している場合に便利です (クラスは 1 つの親しか拡張できません)。
- クラスは
LightningElement
基本クラスに適用されたナビゲーション Mixin を拡張します。 -
bearview
イベントはhandleBearView
関数で処理します。イベントの詳細から熊レコード ID を抽出し、ナビゲーション mixin を使用して熊レコードページに移動します。
- 更新したコードを組織にリリースし、タイルにあるボタンアイコンを使って熊レコードに移動できることを確認します。
このステップはこれで完了です。コンポーネントを熊リストと熊タイルという 2 つの小さなコンポーネントにリファクタリングしました。@api
デコレーターを使用して親リストコンポーネントから子タイルコンポーネントに通信する方法を確認しました。また、カスタムイベントを使用して子から親に通信する方法も確認しました。
次のステップでは、Lightning ページの他のコンポーネントを操作する方法を見ていきます。