名前付きスロット
単純なケースでは、プロジェクションにより、親コンポーネントからのコンテンツを子コンポーネントに投影できます。より複雑なケースでは、投影する必要があるコンテンツスロットが複数ある場合があります。複数のコンテンツスロットを持つには、それらに名前を付けます。
例
この例では、開閉状態を切り替える<Collapsable>
コンポーネントを作成しました。現在、<Collapsable>
が閉じている場合、<Collapsable>
内で実装されたコンテンツが表示されます。それを追加の<Slot>
に変更して、代わりに親からのq:slot="closed"
コンテンツを投影します。
投影されていないスロット
個々のコンポーネントが再レンダリングされたときに表示されるコンソールステートメントを追加しました。<App>
コンポーネントは、クライアント側では再レンダリングされないことに注意してください。また、<Collapsable>
は一度に1つのコンテンツのみを投影します。つまり、<App>
がサーバー上でレンダリングされるときは、Qwikがシリアライズする必要があるデフォルトコンテンツとclosed
コンテンツの両方を生成する必要があります。利点は、<Collapsable>
が開閉状態を切り替えるときに、投影されたコンテンツを復元するために<App>
コンポーネントを再レンダリングする必要がないことです。