元件指令

在 GitHub 上編輯此頁面

on:eventname永久連結

on:eventname={handler}

元件可以使用 createEventDispatcher 或轉送 DOM 事件來發出事件。

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();
</script>

<!-- programmatic dispatching -->
<button on:click={() => dispatch('hello')}> one </button>

<!-- declarative event forwarding -->
<button on:click> two </button>

監聽元件事件看起來與監聽 DOM 事件相同

<SomeComponent on:whatever={handler} />

與 DOM 事件一樣，如果 on: 指令在沒有值的情況下使用，事件將會被轉送，這表示使用者可以監聽它。

<SomeComponent on:whatever />

--style-props永久連結

--style-props="anycssvalue"

您也可以傳遞樣式作為道具給元件，以進行主題設定，使用 CSS 自訂屬性。

Svelte 的實作基本上是加入包裝元素的語法糖。這個範例

<Slider bind:value min={0} --rail-color="black" --track-color="rgb(0, 0, 255)" />

反糖化成這樣

<div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
	<Slider bind:value min={0} max={100} />
</div>

注意：因為這是一個額外的 <div>，請小心您的 CSS 結構可能會意外地鎖定它。使用此功能時請注意這個額外加入的包裝元素。

對於 SVG 名稱空間，上面的範例反糖化成使用 <g>

<g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
	<Slider bind:value min={0} max={100} />
</g>

注意：因為這是一個額外的 <g>，請小心您的 CSS 結構可能會意外地鎖定它。使用此功能時請注意這個額外加入的包裝元素。

Svelte 的 CSS 變數支援允許輕鬆設定主題的元件

<style>
	.potato-slider-rail {
		background-color: var(--rail-color, var(--theme-color, 'purple'));
	}
</style>

因此您可以設定高階主題顏色

/* global.css */
html {
	--theme-color: black;
}

或在使用者端覆寫它

<Slider --rail-color="goldenrod" />

bind:property永久連結

bind:property={variable}

您可以使用與元素相同的語法來繫結到元件道具。

<Keypad bind:value={pin} />

雖然 Svelte 道具在沒有繫結的情況下具有反應性，但預設情況下，這種反應性只會向下傳遞到元件中。使用 bind:property 允許元件內部對屬性的變更從元件中回傳出來。

bind:this永久連結

bind:this={component_instance}

元件也支援 bind:this，讓您可以透過程式與元件執行個體互動。

<ShoppingCart bind:this={cart} />

<button on:click={() => cart.empty()}> Empty shopping cart </button>

請注意，我們無法執行 {cart.empty}，因為當按鈕第一次被渲染時，cart 是 undefined，而且會擲回錯誤。