命名插槽
在简单情况下,投影允许将父组件的内容投影到子组件中。在更复杂的情况下,可能存在多个需要投影的内容插槽。通过为它们命名来实现多个内容插槽。
示例
在这个示例中,我们创建了 <Collapsable>
组件,它在打开和关闭状态之间切换。目前,当 <Collapsable>
关闭时,它显示在 <Collapsable>
中实现的内容。将其更改为一个额外的 <Slot>
,以便从父级投影 q:slot="closed"
内容。
未投影的插槽
我们添加了控制台语句以显示各个组件何时重新渲染。请注意,<App>
组件在客户端上从未重新渲染。还要注意,<Collapsable>
每次只投影一个内容。这意味着当 <App>
在服务器上渲染时,它必须生成默认内容和 closed
内容,Qwik 必须对其进行序列化。好处是,当 <Collapsable>
在打开和关闭状态之间切换时,它不需要重新渲染 <App>
组件来恢复投影到其中的内容。