在我们目前看到的所有示例中,<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;
}}
/>
上一页 下一页
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>