基本投影

投影是一種將內容傳遞到子元件的方法，子元件反過來控制內容的呈現位置。投影是父元件和子元件之間的協作。父元件決定要呈現哪些內容，而子元件決定是否以及在何處呈現內容。

在我們的範例中，<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> 的模板。