命名插槽

在简单情况下,投影允许将父组件的内容投影到子组件中。在更复杂的情况下,可能存在多个需要投影的内容插槽。通过为它们命名来实现多个内容插槽。

示例

在这个示例中,我们创建了 <Collapsable> 组件,它在打开和关闭状态之间切换。目前,当 <Collapsable> 关闭时,它显示在 <Collapsable> 中实现的内容。将其更改为一个额外的 <Slot>,以便从父级投影 q:slot="closed" 内容。

未投影的插槽

我们添加了控制台语句以显示各个组件何时重新渲染。请注意,<App> 组件在客户端上从未重新渲染。还要注意,<Collapsable> 每次只投影一个内容。这意味着当 <App> 在服务器上渲染时,它必须生成默认内容和 closed 内容,Qwik 必须对其进行序列化。好处是,当 <Collapsable> 在打开和关闭状态之间切换时,它不需要重新渲染 <App> 组件来恢复投影到其中的内容。

编辑教程