SvelteSharingcode

Svelte Sharing code

在我们目前看到的所有示例中，​<script>​ 块包含在初始化每个组件实例时运行的代码。对于绝大多数组件，这就是您所需要的。

偶尔，您需要在单个组件实例之外运行一些代码。例如，您可以同时播放这五个音频播放器；如果播放一个停止所有其他人会更好。我们可以通过声明一个 ​<script context="module">​ 块来做到这一点。其中包含的代码将运行一次，即在模块首次计算时，而不是在实例化组件时。将它放在 ​AudioPlayer.svelte​ 的顶部：<script context="module">

let current;

</script>现在组件可以在没有任何状态管理的情况下相互“交谈”：function stopOthers() {

if (current && current !== audio) current.pause();

current = audio;

}示例代码App.svelte<script>

import AudioPlayer from './AudioPlayer.svelte';

</script>

<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->

<AudioPlayer

src="https://sveltejs.github.io/assets/music/strauss.mp3" rel="external nofollow"

title="The Blue Danube Waltz"

composer="Johann Strauss"

performer="European Archive"

/>

<!-- https://musopen.org/music/43775-the-planets-op-32/ -->

<AudioPlayer

src="https://sveltejs.github.io/assets/music/holst.mp3" rel="external nofollow"

title="Mars, the Bringer of War"

composer="Gustav Holst"

performer="USAF Heritage of America Band"

/>

<!-- https://musopen.org/music/8010-3-gymnopedies/ -->

<AudioPlayer

src="https://sveltejs.github.io/assets/music/satie.mp3" rel="external nofollow"

title="Gymnopédie no. 1"

composer="Erik Satie"

performer="Prodigal Procrastinator"

/>

<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->

<AudioPlayer

src="https://sveltejs.github.io/assets/music/beethoven.mp3" rel="external nofollow"

title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"

composer="Ludwig van Beethoven"

performer="European Archive"

/>

<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->

<AudioPlayer

src="https://sveltejs.github.io/assets/music/mozart.mp3" rel="external nofollow"

title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"

composer="Wolfgang Amadeus Mozart"

performer="Markus Staab"

/>

AudioPlayer.svelte<script context="module">

let current;

</script>

<script>

export let src;

export let title;

export let composer;

export let performer;

let audio;
let paused = true;
function stopOthers() {
    if (current && current !== audio) current.pause();
    current = audio;
}

</script>

<style>

article { margin: 0 0 1em 0; max-width: 800px }

h2, p { margin: 0 0 0.3em 0; }

audio { width: 100%; margin: 0.5em 0 1em 0; }

.playing { color: #ff3e00; }

</style>

<article class:playing={!paused}>

<h2>{title}</h2>

<p><strong>{composer}</strong> / performed by {performer}</p>

<audio
    bind:this={audio}
    bind:paused
    on:play={stopOthers}
    controls
    {src}
></audio>

</article>