命名插槽

在簡單的情況下,投影允許將父元件中的內容投影到子元件中。在更複雜的情況下,可能需要投影多個內容插槽。通過命名它們可以實現多個內容插槽。

範例

在此範例中,我們建立了在開啟和關閉狀態之間切換的 <Collapsable> 元件。目前,當 <Collapsable> 關閉時,它會顯示在 <Collapsable> 內部實作的內容。將其更改為另一個 <Slot>,以改為從父元件投影 q:slot="closed" 內容。

未投影的插槽

我們添加了控制台語句來顯示個別元件何時重新渲染。請注意,<App> 元件永遠不會在客戶端上重新渲染。另請注意,<Collapsable> 一次只會投影一個內容。這表示當 <App> 在伺服器上渲染時,它必須產生 Qwik 必須序列化的預設內容以及 closed 內容。好處是當 <Collapsable> 在開啟和關閉狀態之間切換時,它不需要重新渲染 <App> 元件來恢復投影到其中的內容。

編輯教學