基本投影

投影是一种将内容传递给子组件的方式，子组件反过来控制内容的渲染位置。投影是父组件和子组件之间的协作。父组件决定需要渲染的内容，而子组件决定内容的渲染位置和是否渲染。

在我们的示例中，<Panel> 元素（在 <App> 内）的内容是需要投影的内容。<Panel> 组件将内容包装在一个 <div> 标签中，并应使用 <Slot> 元素进行投影。

为什么使用 `<Slot>`？

为什么 Qwik 选择使用 <Slot> 而不是 children 属性？使用 <Slot> 是一个战略性的选择，可以实现组件的乱序渲染。（这意味着组件应该能够重新渲染，即使父组件尚未恢复。）在 Qwik 中使用 children 有两个问题。

为了让 Qwik 使用 children 属性进行投影，它需要像所有其他在 Qwik 中组件之间传递的值一样可序列化。
子组件可以在将 children 插入渲染树之前修改其内容。这将阻止父组件独立于子组件进行渲染。如果子组件要修改 children，则需要在父组件每次更新 children 的值时都这样做。

对于 Qwik，<Slot> 方法更可取，因为它以声明方式控制投影的内容和位置。这允许父组件更改投影内容，而无需强制子组件重新渲染。

更改 <Panel> 组件，使用 <Slot> 元素投影 <App> 内容。

请注意，<App> 和 <Panel> 都不会在按钮点击时重新渲染。这是因为响应式图是在服务器上构建的，并序列化到 HTML 中，因此 Qwik 知道要更新什么，而无需下载和重新渲染 <App> 和 <Panel> 的模板。