Skip to main content
Svelte基础
介绍
响应
属性Props
逻辑表达式
事件
绑定
Classes和样式
动作Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

小主可以把事件处理函数以属性的形式传递给组件. 就像在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>

然后把他们绑定到Dom节点上:

...and wire them up:

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

App.svelte中定义事件处理函数: In App.svelte, define the handlers:

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

小主坚持住,再进阶一点就可以突破到小一阶段了.

Edit this page on 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 />