Файлы .svelte

Компоненты являются строительными блоками приложений Svelte. Они пишутся в файлах с расширением .svelte, используя расширенный HTML.

Все три секции — скрипт, стили и разметка — являются необязательными.

JS

// MyComponent.svelte
<script module>
  // здесь размещается логика уровня модуля
  // (вы будете использовать это редко)
</script>

<script>
  // здесь размещается логика уровня экземпляра
</script>

<!-- здесь размещается разметка (ноль или более элементов) -->

<style>
  /* здесь размещаются стили */
</style>

TS

// MyComponent.svelte
<script module>
  // здесь размещается логика уровня модуля
  // (вы будете использовать это редко)
</script>

<script lang="ts">
  // здесь размещается логика уровня экземпляра
</script>

<!-- здесь размещается разметка (ноль или более элементов) -->

<style>
  /* здесь размещаются стили */
</style>

<script>

Блок <script> содержит JavaScript (или TypeScript, когда добавлен атрибут lang="ts"), который выполняется при создании экземпляра компонента. Переменные, объявленные (или импортированные) на верхнем уровне, могут быть использованы в разметке компонента.

В дополнение к обычному JavaScript вы можете использовать руны для объявления свойств компонента и добавления реактивности к вашему компоненту. Руны будут рассмотрены в следующем разделе.

<script module>

Тег <script> с атрибутом module выполняется один раз при первом выполнении модуля, а не для каждого экземпляра компонента. Переменные, объявленные в этом блоке, могут быть использованы в других частях компонента, но не наоборот.

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

<script>
  total += 1;
  console.log(`создано ${total} раз`);
</script>

Вы можете делать export привязок из этого блока, и они станут экспортами скомпилированного модуля. Вы не можете использовать export default, так как экспорт по умолчанию — это сам компонент.

Заметка

Если вы используете TypeScript и импортируете такие экспорты из блока module в файл .ts, убедитесь, что ваш редактор настроен так, чтобы TypeScript знал о них. Это касается нашего расширения для VS Code и плагина для IntelliJ, но в других случаях вам может понадобиться настроить наш плагин для редактора TypeScript.

Осторожно

В Svelte 4 этот тег скрипта создавался с помощью <script context="module">

<style>

CSS внутри блока <style> будет ограничен этим компонентом.

<style>
  p {
    /* это повлияет только на элементы <p> в этом компоненте */
    color: burlywood;
  }
</style>

Для получения дополнительной информации перейдите в раздел о стилизации.