コンポーネントの構成

コードの再利用性とメンテナンス性を高めるため、一連の小さなコンポーネントを使用してアプリケーションとコンポーネントを構成すると便利です。lightning 名前空間には、コンポーネントの構築に使用できる lightning-button などの基本コンポーネントが多数含まれています。

コンポーネントで構成された簡単なアプリケーションを見てみましょう。このマークアップは、オーナーコンテナの概念を示すことを考慮して作成されたものです。実際のアプリケーションでは、c-todo-item インスタンスの数は可変であり、for:each ループで動的に入力されます。

オーナー

オーナーは、テンプレートを所有するコンポーネントです。この例では、オーナーは c-todo-app コンポーネントです。オーナーは、含まれているすべての構成コンポーネントを制御します。オーナーは次のことができます。

  • 構成コンポーネントの公開プロパティの設定
  • 構成コンポーネントでのメソッドのコール
  • 構成コンポーネントによって起動されるイベントのリスン
コンテナ

コンテナには他のコンポーネントが含まれますが、コンテナ自体はオーナーコンポーネントに含まれます。この例では、c-todo-wrapper はコンテナです。コンテナはオーナーよりも強力ではありません。コンテナでは、次のことができます。

  • 含まれているコンポーネントの公開プロパティの参照 (変更はしない)
  • 構成コンポーネントでのメソッドのコール
  • 含まれているコンポーネントによって上に伝達されるいくつかの (すべてとは限らない) イベントをリスンします。
親と子

あるコンポーネントに別のコンポーネントが含まれている (同様にこれにも他のコンポーネントを含むことができる) 場合、コンテインメント階層があります。ドキュメント内で親コンポーネントと子コンポーネントに言及することがあります。親コンポーネントには子コンポーネントが含まれます。親コンポーネントは、オーナーの場合もあれば、コンテナの場合もあります。

関連トピック