如何使用 Svelte 中的插槽來定義可組合的組件
插槽是一種方便的方式,讓你能夠定義可以組合在一起的組件。
根據你的觀點,插槽也是一種方便的方式,用於配置正在匯入的組件。
以下是它們的工作原理。
在組件中,你可以使用 <slot />
或 <slot></slot>
語法來定義插槽。
這是一個簡單將 <button>
HTML 標籤輸出的 Button.svelte
組件:
<button><slot /></button>
對於 React 開發者來說,這基本上與
<button>{props.children}</button>
相同。
任何匯入它的組件都可以定義要放入插槽中的內容,只需將其添加到組件的開始和結束標籤中:
<script>
import Button from './Button.svelte'
</script>
<Button>將此插入插槽中</Button>
你可以定義一個預設的內容,如果插槽未被填充,將會使用它:
<button>
<slot>
按鈕的默認文字
</slot>
</button>
在一個組件中你可以有多個插槽,你可以使用命名插槽來區分它們。未命名的單個插槽將是默認插槽:
<slot name="before" />
<button>
<slot />
</button>
<slot name="after" />
以下是如何使用的方式:
<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>