Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

你可以像任何其他 prop 一样将事件处理程序传递给组件。在 Stepper.svelte 中,添加 incrementdecrement 属性...

¥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 />