命名插槽
在簡單的情況下,投影允許將父元件中的內容投影到子元件中。在更複雜的情況下,可能需要投影多個內容插槽。通過命名它們可以實現多個內容插槽。
範例
在此範例中,我們建立了在開啟和關閉狀態之間切換的 <Collapsable>
元件。目前,當 <Collapsable>
關閉時,它會顯示在 <Collapsable>
內部實作的內容。將其更改為另一個 <Slot>
,以改為從父元件投影 q:slot="closed"
內容。
未投影的插槽
我們添加了控制台語句來顯示個別元件何時重新渲染。請注意,<App>
元件永遠不會在客戶端上重新渲染。另請注意,<Collapsable>
一次只會投影一個內容。這表示當 <App>
在伺服器上渲染時,它必須產生 Qwik 必須序列化的預設內容以及 closed
內容。好處是當 <Collapsable>
在開啟和關閉狀態之間切換時,它不需要重新渲染 <App>
元件來恢復投影到其中的內容。