メインコンテンツへスキップ
高度なSvelte <script module> エクスポート

moduleスクリプトブロックからエクスポートされたものはすべて、モジュール自体からのエクスポートになります。stopAll関数をエクスポートしてみましょう。

AudioPlayer
<script module>
	let current;

	export function stopAll() {
		current?.pause();
	}
</script>

これでApp.svelteでstopAllをインポートできます...

App
<script>
	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
	import { tracks } from './tracks.js';
</script>

...そして、イベントハンドラで使用します

App
<div class="centered">
	{#each tracks as track}
		<AudioPlayer {...track} />
	{/each}

	<button onclick={stopAll}>
		stop all
	</button>
</div>

コンポーネントがデフォルトのエクスポートであるため、デフォルトのエクスポートを持つことはできません。

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>