Svelte基础
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
小主这一节的练习就比较简单了,就一句心法:先前学习的属性散播写法对事件也是有效的。
比如在App.svelte
定义了onclick
事件处理函数,我们就可以使用散播的形式把它传递给BigRedButton.svelte
里的button
:
We can also spread event handlers directly onto elements. Here, we’ve defined an
onclick
handler inApp.svelte
— all we need to do is pass the props to the<button>
inBigRedButton.svelte
:
BigRedButton
<button {...props}>
Push
</button>
恭喜小主成功突破👏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
import BigRedButton from './BigRedButton.svelte';
import horn from './horn.mp3';
const audio = new Audio();
audio.src = horn;
function honk() {
audio.load();
audio.play();
}
</script>
<BigRedButton onclick={honk} />