Файлы .svelte
Компоненты являются строительными блоками приложений Svelte. Они пишутся в файлах с расширением .svelte
, используя расширенный HTML.
Все три секции — скрипт, стили и разметка — являются необязательными.
<script module> // здесь размещается логика уровня модуля // (вы будете использовать это редко)</script>
<script> // здесь размещается логика уровня экземпляра</script>
<!-- здесь размещается разметка (ноль или более элементов) -->
<style> /* здесь размещаются стили */</style>
<script module> // здесь размещается логика уровня модуля // (вы будете использовать это редко)</script>
<script lang="ts"> // здесь размещается логика уровня экземпляра</script>
<!-- здесь размещается разметка (ноль или более элементов) -->
<style> /* здесь размещаются стили */</style>
<script>
Заголовок раздела «<script>»Блок <script>
содержит JavaScript (или TypeScript, когда добавлен атрибут lang="ts"
), который выполняется при создании экземпляра компонента. Переменные, объявленные (или импортированные) на верхнем уровне, могут быть использованы в разметке компонента.
В дополнение к обычному JavaScript вы можете использовать руны для объявления свойств компонента и добавления реактивности к вашему компоненту. Руны будут рассмотрены в следующем разделе.
<script module>
Заголовок раздела «<script module>»Тег <script>
с атрибутом module
выполняется один раз при первом выполнении модуля, а не для каждого экземпляра компонента. Переменные, объявленные в этом блоке, могут быть использованы в других частях компонента, но не наоборот.
<script module> let total = 0;</script>
<script> total += 1; console.log(`создано ${total} раз`);</script>
Вы можете делать export
привязок из этого блока, и они станут экспортами скомпилированного модуля. Вы не можете использовать export default
, так как экспорт по умолчанию — это сам компонент.
<style>
Заголовок раздела «<style>»CSS внутри блока <style>
будет ограничен этим компонентом.
<style> p { /* это повлияет только на элементы <p> в этом компоненте */ color: burlywood; }</style>
Для получения дополнительной информации перейдите в раздел о стилизации.