Events / Component events • Svelte Tutorial

Basic Svelte Events Component events

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

Stepper

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

<script lang="ts">
	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}
/>

previous next

<script>

	import Stepper from './Stepper.svelte';

	let value = $state(0);

</script>

<p>The current value is {value}</p>

<Stepper />

show text show editor