Именованные слоты
В простых случаях проекция позволяет отображать переданное содержимое родительского компонента в дочерний компонент. В более сложных случаях слотов контента, который необходимо спроецировать, может быть несколько. Наличие нескольких слотов контента достигается путем присвоения им имен.
Пример
В этом примере мы создали компонент <Collapsable>, который переключается между открытым и закрытым состояниями. В настоящее время, когда <Collapsable> закрыт, он показывает содержимое, которое было реализовано внутри <Collapsable>. Добавьте ещё <Slot>, чтобы проецировать содержимое q:slot="closed" из родителя.
Непроецируемые слоты
Мы добавили консольные сообщения, чтобы показать, когда отдельные компоненты повторно рендерятся. Обратите внимание, что компонент <App> никогда не рендерится на клиенте. Также обратите внимание, что <Collapsable> проецирует только одно содержимое за один раз. Это означает, что при рендере <App> на сервере он должен создавать как содержимое по умолчанию, так и закрытое содержимое, которое Qwik должен сериализовать. Преимуществом является то, что когда <Collapsable> переключается между открытым и закрытым состояниями, ему не нужно перерисовывать компонент <App>, чтобы восстановить содержимое, которое было спроецировано на него.