/

Svelte 插槽

Svelte 插槽

如何使用 Svelte 中的插槽來定義可組合的組件

插槽是一種方便的方式，讓你能夠定義可以組合在一起的組件。

根據你的觀點，插槽也是一種方便的方式，用於配置正在匯入的組件。

以下是它們的工作原理。

在組件中，你可以使用 <slot /> 或 <slot></slot> 語法來定義插槽。

這是一個簡單將 <button> HTML 標籤輸出的 Button.svelte 組件：

1
<button><slot /></button>

對於 React 開發者來說，這基本上與 <button>{props.children}</button> 相同。

任何匯入它的組件都可以定義要放入插槽中的內容，只需將其添加到組件的開始和結束標籤中：

1
2
3
4
5
<script>
import Button from './Button.svelte'
</script>

<Button>將此插入插槽中</Button>

你可以定義一個預設的內容，如果插槽未被填充，將會使用它：

1
2
3
4
5
<button>
 <slot>
 按鈕的默認文字
 </slot>
</button>

在一個組件中你可以有多個插槽，你可以使用命名插槽來區分它們。未命名的單個插槽將是默認插槽：

1
2
3
4
5
<slot name="before" />
<button>
 <slot />
</button>
<slot name="after" />

以下是如何使用的方式：

1
2
3
4
5
6
7
8
9
<script>
import Button from './Button.svelte'
</script>

<Button>
 將此插入插槽中
 <p slot="before">在前面添加這個</p>
 <p slot="after">在後面添加這個</p>
</Button>

它將會渲染如下的 DOM 內容：

<p slot="before">在前面添加這個</p>
<button>
 將此插入插槽中
</button>
<p slot="after">在後面添加這個</p>