Как импортировать компоненты в Svelte

Узнайте, как импортировать компоненты в Svelte

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

Вот простой пример компонента Svelte, живущего в файле с именемButton.svelte:

<button>A button</button>

Тыможетдобавьте CSS и JS к этому компоненту, но эта простая разметка HTML уже является разметкой компонента, нет необходимости заключать ее в другой специальный тег или что-то еще.

Чтобы экспортировать эту разметку из этого компонента, вам не нужно ничего делать. Теперь вы можете импортировать его в любой другой компонент Svelte, используяimport ComponentName from 'componentPath'синтаксис:

<script>
import Button from './Button.svelte';
</script>

И теперь вы можете использовать только что импортированный компонент в разметке, например, тег HTML:

<Button />

Скачать мою бесплатнуюСправочник Svelte


Более стройные уроки: