Day10: <slot> 與 class:

第 12 屆 IT 鐵人賽影片教學 — 30 天從 0 到 1 學 Svelte

◼︎ 本集內容：slot 與 class: 的用法

Svelte 當中有 slot 語法（directive）可供使用，使用方法與 Vue 的 slot 類似，可以增加元件客製化的彈性。

class: 可以和變數做綁定，方便簡化 classname 的串接。

◼︎ 相關連結：

・Svelte 官網 https://svelte.dev

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day10 - Svelte 中的 slot 與 class: 語法
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   本⽇⽬標
   理解 class: 跟 slot 的⽤法
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   class:
   ⽅便將變數與 classname 綁定
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   使⽤情景：active
   透過變數 toggle 按鈕
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   slot
   可透過 slot 將客製化元件傳入⼦元件當中
   

   View Slide

6. 第 12 屆 IT 鐵⼈賽
   named slot
   ⼀個元件中可以有多個 slot
   

   View Slide

7. 第 12 屆 IT 鐵⼈賽
   將變數傳給⽗元件
   

   View Slide