Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

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

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