Skip to main content
Svelte基础
介绍
响应
属性Props
逻辑表达式
事件
绑定
Classes和样式
动作Actions
转场
Svelte高阶
响应式进阶
内容复用
动画
高级绑定
高级转场
上下文API
特殊元素
脚本模块
接下来
SvelteKit基础
介绍
路由
加载数据
Headers和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} />