.svelte 文件

组件是 Svelte 应用程序的构建基块。它们被写入 .svelte 文件中，使用 HTML 的超集。

这三个部分 — 脚本、样式和标记 — 都是可选的。

<script module>
	// 模块级逻辑在这里
	// (你很少会用到这个)
</script>

<script>
	// 实例级逻辑在这里
</script>

<!-- 标记(零个或多个条目)在这里 -->

<style>
	/* 样式在这里 */
</style>

<script module>
	// 模块级逻辑在这里
	// (你很少会用到这个)
</script>

<script lang="ts">
	// 实例级逻辑在这里
</script>

<!-- 标记(零个或多个条目)在这里 -->

<style>
	/* 样式在这里 */
</style>

<script>

一个 <script> 块包含在创建组件实例时运行的 JavaScript（或在添加 lang="ts" 属性时使用 TypeScript）。在顶层声明（或导入）的变量可以在组件的标记中被引用。

除了普通的 JavaScript，你还可以使用 runes 声明组件 props并为组件添加响应性。Runes 将在下一节中介绍。

<script module>

带有 module 属性的 <script> 标签在模块首次评估时运行一次，而不是在每个组件实例化时运行。在此块中声明的变量可以在组件的其他位置引用，但反之则不行。

<script module>
	let total = 0;
</script>

<script>
	total += 1;
	console.log(`实例化 ${total} 次`);
</script>

您可以从此代码块中 export 绑定，它们将成为编译后模块的导出。您不能使用 export default，因为默认导出是组件本身。

如果你正在使用 TypeScript 并将 module 代码块的导出导入到 .ts 文件中，请确保设置好你的编辑器以便 TypeScript 能够识别它们。我们的 VS Code 插件和 IntelliJ 插件都支持这一点，但在其他情况下，你可能需要设置我们的 TypeScript 编辑器插件。

Legacy mode

在 Svelte 4 中，此脚本标签是使用 <script context="module"> 创建的。

<style>

在 <style> 块内的 CSS 将限定在该组件的作用域内。

<style>
	p {
		/* 这只会影响该组件中的 <p> 元素 */
		color: burlywood;
	}
</style>

有关更多信息，请参阅样式章节。