跳至主要内容

在我们迄今为止看到的示例中,<script> 块包含在每个组件实例初始化时运行的代码。对于绝大多数组件,这都是你唯一需要的。

偶尔,你需要在单个组件实例之外运行一些代码。例如:回到我们之前练习中自定义的音频播放器,你可以同时播放所有四首曲目。如果播放一个停止所有其他曲目会更好。

我们可以通过声明一个 <script module> 块来做到这一点。它包含的代码将在模块第一次评估时运行一次,而不是在实例化组件时运行。将其放在 AudioPlayer.svelte 的顶部(请注意,这是一个单独的脚本标签)

AudioPlayer
<script module>
	let current;
</script>

现在,组件可以在没有任何状态管理的情况下相互“通信”了。

AudioPlayer
<audio
	src={src}
	bind:currentTime={time}
	bind:duration
	bind:paused
	onplay={(e) => {
		const audio = e.currentTarget;

		if (audio !== current) {
			current?.pause();
			current = audio;
		}
	}}
	onended={() => {
		time = 0;
	}}
/>

在 GitHub 上编辑此页面

上一页 下一页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
	import AudioPlayer from './AudioPlayer.svelte';
	import { tracks } from './tracks.js';
</script>
 
<div class="centered">
	{#each tracks as track}
		<AudioPlayer {...track} />
	{/each}
</div>
 
<style>
	.centered {
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
		gap: 0.5em;
		max-width: 40em;
		margin: 0 auto;
	}
</style>