任何从 context="module" 这个 script 标签中导出的内容都会变成从模块本身导出的内容。让我们导出一个 stopAll 函数：
AudioPlayer.svelte
<script context="module">
let current;
export function stopAll() {
current?.pause();
}
</script>现在我们可以在 App.svelte 中导入 stopAll 了……
App.svelte
<script>
import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
import { tracks } from './tracks.js';
</script>……然后在事件处理器中使用：
App.svelte
<div class="centered">
{#each tracks as track}
<AudioPlayer {...track} />
{/each}
<button on:click={stopAll}>
stop all
</button>
</div>没有默认导出，因为组件本身 就是 默认导出。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>