.svelte 檔案

元件是 Svelte 應用程式的建構區塊。它們使用 HTML 的超集寫入 .svelte 檔案中。

所有三個區塊 — script、styles 和 markup — 都是選用的。

<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（或 TypeScript，當加入 lang="ts" 屬性時），在建立元件實例時執行。在最上層宣告（或匯入）的變數可以在元件的 markup 中引用。

除了普通的 JavaScript 之外，您可以使用符文來宣告元件屬性並將響應式加入您的元件中。符文會在下一節中介紹。

<script module>

具有 module 屬性的 <script> 標籤會在模組首次評估時執行一次，而不是針對每個元件實例執行。在此區塊中宣告的變數可以在元件的其他地方引用，但反之則不行。

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

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

您可以從此區塊 export 綁定，它們會成為編譯模組的輸出。您不能 export default，因為預設輸出是元件本身。

如果您正在使用 TypeScript 並從 module 區塊將這些輸出匯入到 .ts 檔案中，請確保您的編輯器設定讓 TypeScript 知道它們。我們的 VS Code 擴充功能和 IntelliJ 外掛程式就是這種情況，但在其他情況下，您可能需要設定我們的 TypeScript 編輯器外掛程式。

舊版模式

在 Svelte 4 中，這個 script 標籤是使用 <script context="module"> 建立的

<style>

<style> 區塊內的 CSS 將被範圍限定於該元件。

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

有關更多資訊，請前往關於樣式設定的章節。