.svelte 文件

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

¥Components are the building blocks of Svelte applications. They are written into .svelte files, using a superset of HTML.

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

¥All three sections — script, styles and markup — are optional.

<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 module>
	// module-level logic goes here
	// (you will rarely use this)
</script>

<script lang="ts">
	// instance-level logic goes here
</script>

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

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

<script>

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

¥A <script> block contains JavaScript (or TypeScript, when adding the lang="ts" attribute) that runs when a component instance is created. Variables declared (or imported) at the top level can be referenced in the component’s markup.

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

¥In addition to normal JavaScript, you can use runes to declare component props and add reactivity to your component. Runes are covered in the next section.

<script module>

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

¥A <script> tag with a module attribute runs once when the module first evaluates, rather than for each component instance. Variables declared in this block can be referenced elsewhere in the component, but not vice versa.

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

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

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

¥You can export bindings from this block, and they will become exports of the compiled module. You cannot export default, since the default export is the component itself.

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

¥[!NOTE] If you are using TypeScript and import such exports from a module block into a .ts file, make sure to have your editor setup so that TypeScript knows about them. This is the case for our VS Code extension and the IntelliJ plugin, but in other cases you might need to setup our TypeScript editor plugin.

Legacy mode

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

¥[!LEGACY] In Svelte 4, this script tag was created using <script context="module">

<style>

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

¥CSS inside a <style> block will be scoped to that component.

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

有关更多信息，请前往 styling 部分。

¥For more information, head to the section on styling.