Как экспортировать функции и переменные из компонента Svelte

Узнайте, как экспортировать функции и переменные из компонента Svelte

Вы знаете, что можете импортировать компонент Svelte в другой, используя синтаксис

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

Что, если вы хотите экспортировать что-то большее, чем экспорт по умолчанию?

Ну, вы должны экспортировать это из специальногоscriptтег в компонент, сcontext="module"атрибут.

Вот пример. Скажем, у вас есть компонент Button вButton.svelte:

<button>A button</button>

и вы хотите предоставить другим компонентам возможность изменять цвет кнопки. Вы можете использовать реквизит, это один из примеров. Или вы можете предоставить функцию с именемchangeColor.

Вы пишете и экспортируете его в этом специальномscriptтег:

<script context="module">
export function changeColor() {
  //...add logic..
}
</script>

<button>A button</button>

Предупреждение: я не реализовал фактическую функциональность, но вы поняли идею.

Обратите внимание, что у вас может быть другой «нормальный» тег скрипта в компоненте.

Теперь другие компоненты могут импортировать кнопку, которая является экспортом по умолчанию, иchangeColorфункция тоже:

<script>
import Button, { changeColor } from './Button.svelte'
</script>

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


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