Svelte基础
Svelte高阶
上下文API
特殊元素
接下来
SvelteKit基础
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
小主可以把事件处理函数以属性的形式传递给组件. 就像在Stepper.svelte中,添加increment和decrement两个属性:
You can pass event handlers to components like any other prop. In
Stepper.svelte, addincrementanddecrementprops...
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}
/>小主坚持住,再进阶一点就可以突破到小一阶段了.
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 />