.svelte 文件

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

所有三个部分（脚本、样式和标记）都是可选的。

<script module>
	// module-level logic goes here
	// (you will rarely use this)
</script>

<script>
	// instance-level logic goes here
</script>

<!-- markup (zero or more items) goes here -->

<style>
	/* styles go here */
</style>

<script>

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

除了普通的 JavaScript 之外，您还可以使用符文来声明组件属性并向组件添加反应性。符文将在下一节中介绍。

<script module>

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

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

<script>
	total += 1;
	console.log(`instantiated ${total} times`);
</script>

您可以从此块导出绑定，它们将成为编译模块的导出。您不能导出默认值，因为默认导出是组件本身。

如果您使用 TypeScript 并将此类导出从 module 块导入到 .ts 文件中，请确保您的编辑器已设置，以便 TypeScript 知道它们。对于我们的 VS Code 扩展和 IntelliJ 插件来说，情况就是这样，但在其他情况下，您可能需要设置我们的TypeScript 编辑器插件。

旧版模式

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

<style>

<style> 块内的 CSS 将作用于该组件。

<style>
	p {
		/* this will only affect <p> elements in this component */
		color: burlywood;
	}
</style>

有关更多信息，请转到有关样式的部分。