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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連トピック

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