Перейти к содержимому

Файлы .svelte

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

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

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

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

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

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

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

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

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

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

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