メインコンテンツにスキップ

他のプロパティと同様に、イベントハンドラをコンポーネントに渡すことができます。 `Stepper.svelte` で、`increment` と `decrement` プロパティを追加します...

Stepper
<script>
	let { increment, decrement } = $props();
</script>

...そしてそれらを接続します

Stepper
<button onclick={decrement}>-1</button>
<button onclick={increment}>+1</button>

`App.svelte` で、ハンドラを定義します

<Stepper
	increment={() => value += 1}
	decrement={() => value -= 1}
/>

GitHubでこのページを編集

1
2
3
4
5
6
7
8
9
10
<script>
	import Stepper from './Stepper.svelte';
 
	let value = $state(0);
</script>
 
<p>The current value is {value}</p>
 
<Stepper />