子コンポーネントのスプレッドプロパティ

lwc:spread ディレクティブを使用して、オブジェクトの一連のプロパティを子コンポーネントに渡します。lwc:spread を使用すると、要素は、実行時にプロパティとしてバインドされたオブジェクトを受け入れることもできます。

lwc:spread ディレクティブは 1 つのオブジェクトを受け入れます。

1<!-- app.html -->
2<template>
3  <c-child lwc:spread={childProps}></c-child>
4</template>

キー - 値ペアを含むオブジェクトを使用します。ここでキーは、プロパティ名です。

1// app.js
2import { LightningElement } from "lwc";
3
4export default class extends LightningElement {
5  childProps = { name: "James Smith", country: "USA" };
6}

子コンポーネントで、テンプレートのプロパティを使用します。

1<!-- child.html -->
2<template>
3  <p>Name: {name}</p>
4  <p>Country : {country}</p>
5</template>

@api デコレータを使用して、プロパティを親コンポーネントに公開します。

1// child.js
2import { LightningElement, api } from "lwc";
3
4export default class Child extends LightningElement {
5  @api name;
6  @api country;
7}

lwc:spread は常に最後に適用されるため、テンプレートで直接宣言されたプロパティが上書きされます。ディレクティブで使用できる lwc:spread インスタンスは 1 つのみです。

1<!-- app.html -->
2<template>
3  <c-child name="lwc" lwc:spread={childProps}></c-child>
4</template>

この例では、親コンポーネントが name="lwc" を渡していても、c-child は name を Lightning Web Components として渡します。最終的に子コンポーネントは "Lightning Web Components" 名を取得します。

1// app.js
2import { LightningElement } from "lwc";
3
4export default class extends LightningElement {
5  childProps = { name: "Lightning Web Components" };
6}

lwc:spread は、テンプレートで定義されたイベントハンドラにコンポーネントをバインドしません。たとえば、オブジェクトの onclick ハンドラをプロパティ名として渡すことができます。

1<!-- app.html -->
2<template>
3  <c-child lwc:spread={simpleProps}></c-child>
4</template>

ここで c-child は name を LWC として渡します。c-child 要素がクリックされると、spreadClick() は name を Lightning Web Components に置き換えます。

1// app.js
2import { LightningElement } from "lwc";
3
4export default class extends LightningElement {
5  simpleProps = { name: "LWC", onclick: this.spreadClick.bind(this) };
6  spreadClick() {
7    this.simpleProps = { name: "Lightning Web Components" };
8  }
9}

spreadClick() に onclick が含まれていませんが、この要素には、以前 simpleProps オブジェクトを介して割り当てられた onclick が含まれています。

子コンポーネントでの HTML 属性の反映

ほとんどの HTML 属性はプロパティとして反映されます。たとえば、class 属性は className プロパティとして反映されます。

プロパティを子コンポーネントに渡すとしましょう。

1<!-- app.html -->
2<template>
3  <c-child lwc:spread={spanProps}></c-child>
4</template>

その結果、spanProps プロパティによって、要素は <c-child class="spanclass" id="mySpan"></c-child> として表示されます。

1// app.js
2import { LightningElement } from "lwc";
3
4export default class extends LightningElement {
5  spanProps = { className: "spanclass", id: "myspan" };
6}

関連トピック

HTML テンプレートディレクティブ

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。