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

小主这一节的练习就比较简单了,就一句心法:先前学习的属性散播写法对事件也是有效的。 比如在App.svelte定义了onclick事件处理函数,我们就可以使用散播的形式把它传递给BigRedButton.svelte里的button:

We can also spread event handlers directly onto elements. Here, we’ve defined an onclick handler in App.svelte — all we need to do is pass the props to the <button> in BigRedButton.svelte:

BigRedButton
<button {...props}>
	Push
</button>

恭喜小主成功突破👏

Edit this page on GitHub

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