データフロー

コードが複雑になり、思わぬ副作用が発生することを回避するには、データが親から子に一方向に流れるようにする必要があります。

コンポーネントで @api を使用してフィールドをデコレートして、それを公開プロパティとして公開する場合、フィールドを初期化するときにのみ値が設定されます。フィールドが初期化されたら、オーナーコンポーネントでのみ値が設定されます。コンポーネントでは、参照のみとして渡される値が処理されます。所有者コンポーネントが提供するプロパティ値の変異をトリガするために、子コンポーネントは親にイベントを送信できます。親がデータを所有している場合、親はプロパティ値を変更でき、これは一方向データバインドで子コンポーネントに伝達されます。

コンポーネントに渡される非プリミティブ値 (オブジェクトや配列など) は参照のみです。コンポーネントは、オブジェクトまたは配列のコンテンツを変更できません。コンポーネントがコンテンツを変更しようとすると、ブラウザコンソールにエラーが表示されます。データを変更するには、変更するオブジェクトの浅いコピーを作成します。

所有者コンポーネントが提供するプロパティ値の変異をトリガするために、コンポーネントは所有者にイベントを送信する必要があります。

参照のみオブジェクトを理解するには、lwc.dev (Lightning Web Components のオープンソース開発者サイト) でドキュメントを参照したり、コードを試したりしてください。

プロパティには、オブジェクトデータ型ではなく、プリミティブデータ型を使用することをお勧めします。上位コンポーネントの複雑なデータ構造をスライスして、コンポーネントの子にプリミティブ値を渡します。

プリミティブ値を使用した方がよい理由はいくつかあります。

• プリミティブ値には、データ図形を明確に定義する特定の @api プロパティが必要です。オブジェクトまたは配列を受け入れるには、形状を指定するドキュメントが必要です。オブジェクトの形状が変更された場合、コンシューマは中断します。
• 標準 HTML 要素が受け入れるのは、属性のプリミティブ値のみです。標準 HTML 要素に複雑な形状が必要な場合は、子コンポーネントが使用されます。たとえば、table 要素では、tr 要素と td 要素が使用されます。HTML で定義できるのは、プリミティブ型のみです。たとえば、<table data={...}> は、HTML の値ではなく、Lightning Web Components 専用の値です。