Компоненты

Компонент — самостоятельный кусок интерфейса: кнопка, карточка, строка списка. Его пишут один раз и вставляют на страницу столько раз, сколько нужно. В Svelte каждый компонент — отдельный файл с расширением .svelte.

Три части файла

Файл компонента может содержать три части, каждая необязательна:

Создание компонента

Специальной команды нет — создайте папку src/lib/components и в ней файл TodoItem.svelte:

<!-- src/lib/components/TodoItem.svelte -->
<script>
  let text = 'Купить хлеб';
</script>
 
<li>{text}</li>
 
<style>
  li {
    padding: 4px 0;
    color: #333;
  }
</style>

Компонент выводит пункт списка с текстом задачи. Переменная из <script> доступна в разметке через фигурные скобки, а стиль li касается только этого компонента.

Вывод на странице

Чтобы использовать компонент, его импортируют в другом компоненте и пишут как тег:

<!-- src/routes/+page.svelte -->
<script>
  import TodoItem from '$lib/components/TodoItem.svelte';
</script>
 
<h1>Мои задачи</h1>
<ul>
  <TodoItem />
  <TodoItem />
</ul>

На http://localhost:5173 под заголовком появятся два одинаковых пункта «Купить хлеб». Позже, в уроке о свойствах, каждый пункт получит свой текст.

Имена компонентов

Имя файла становится именем при импорте, и его принято писать с большой буквы: TodoItem, TodoList. Svelte отличает компоненты от HTML-тегов именно по большой букве: <button> — обычный элемент, <Button> — компонент.

Порядок частей

Обычно пишут сначала <script>, затем разметку, в конце <style>. Порядок можно менять, но в файле допускается только один обычный блок <script> и один <style>.

Частая ошибка

Назвать компонент с маленькой буквы:

<script>
  import todoItem from '$lib/components/TodoItem.svelte';
</script>
 
<todoItem />

Svelte воспримет <todoItem /> как неизвестный HTML-тег, и на странице ничего не появится. Имя импортированного компонента всегда начинайте с заглавной буквы.