<script module> / Exports • Svelte Tutorial

Advanced Svelte <script module> Exports

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>

<script lang="ts">
	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>

default export は使うことはできません、なぜならコンポーネント自体が default export だからです。

previous next

<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>

show text show editor