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ハンドブック


より洗練されたチュートリアル: