你可以像任何其他 prop 一样将事件处理程序传递给组件。在 Stepper.svelte
中,添加 increment
和 decrement
属性...
¥You can pass event handlers to components like any other prop. In Stepper.svelte
, add increment
and decrement
props...
Stepper
<script>
let { increment, decrement } = $props();
</script>
<script lang="ts">
let { increment, decrement } = $props();
</script>
...并将它们连接起来:
¥...and wire them up:
Stepper
<button onclick={decrement}>-1</button>
<button onclick={increment}>+1</button>
在 App.svelte
中,定义处理程序:
¥In App.svelte
, define the handlers:
<Stepper
increment={() => value += 1}
decrement={() => value -= 1}
/>
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 />