on:eventnamepermalink
on:eventname={handler}コンポーネントは createEventDispatcher を用いるか、または DOM イベントを転送(forward)することでイベントを発火することができます。
<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: ディレクティブが値なしで使われる場合、イベントは転送(forward)されます、これはつまり、コンポーネントを使用する側でイベントをリッスンできることを意味します。
<SomeComponent on:whatever />--style-propspermalink
--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 namespace の場合、上記の例はデシュガー(脱糖)すると <g> が代わりに使用されます:
<g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
<Slider bind:value min={0} max={100} />
</g>Note: 余分な <g> が追加されるため、あなたのCSS構造が誤ってこれをターゲットにしてしまう可能性があるので注意してください。この機能を利用する際は、この追加されるラッパー要素に気をつけてください。
Svelte の CSS Variables サポートによって、テーマに沿ったコンポーネントを簡単に作ることができます:
<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:propertypermalink
bind:property={variable}要素の場合と同じ構文を用いてコンポーネントの props をバインドすることができます。
<Keypad bind:value={pin} />While Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using bind:property allows changes to the property from within the component to flow back up out of the component.
bind:thispermalink
bind:this={component_instance}コンポーネントは bind:this もサポートしており、これを用いることでコンポーネントのインスタンスをプログラムで操作できるようになります。
<ShoppingCart bind:this={cart} />
<button on:click={() => cart.empty()}> Empty shopping cart </button>ボタンが最初にレンダリングされるときには
cartがundefinedであり、エラーを投げるので、{cart.empty}を実行できないことに注意してください。