苗條的插槽

如何使用Svelte中的插槽定義可以組合在一起的組件

插槽是一種方便的方法,可讓您定義可以組合在一起的組件。

反之亦然,根據您的觀點,插槽是配置導入組件的便捷方法。

這是它們的工作方式。

在組件中,您可以使用<slot />(或者<slot></slot>) 句法。

這是一個Button.svelte簡單地打印一個<button>HTML標記:

<button><slot /></button>

對於React開發人員,這基本上與<button>{props.children}</button>

任何導入它的組件都可以通過將其添加到組件的開始和結束標記中來定義將要放入插槽的內容:

<script>
import Button from './Button.svelte'
</script>

<Button>Insert this into the slot</Button>

您可以定義一個默認值,如果未填充插槽,則使用該默認值:

<button>
  <slot>
    Default text for the button
  </slot>
</button>

一個組件中可以有多個插槽,並且可以使用命名插槽將一個插槽與另一個插槽區分開。單個未命名的插槽將是默認插槽:

<slot name="before" />
<button>
  <slot />
</button>
<slot name="after" />

使用方法如下:

<script>
import Button from './Button.svelte'
</script>

<Button> Insert this into the slot <p slot=“before”>Add this before</p> <p slot=“after”>Add this after</p> </Button>

這會將以下內容呈現給DOM:

<p slot="before">Add this before</p>
<button>
  Insert this into the slot
</button>
<p slot="after">Add this after</p>

免費下載我的苗條手冊


更多精妙的教程: