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入門-短いチュートリアル
• Svelteで小道具を操作する方法
• Svelteにコンポーネントをインポートする方法
• Svelteコンポーネントから関数と変数をエクスポートする方法
• Svelteテンプレート：条件付きロジック
• Svelteコンポーネントをオンデマンドで再レンダリングする方法
• Svelteスロット
• Svelteテンプレートにコメントを追加する方法
• Svelteバインディング
• Svelteでの状態更新の処理
• Svelteのリアクティブステートメント
• Svelteライフサイクルイベント
• Svelteテンプレート：ループ
• SvelteテンプレートでPromiseを解決する
• Svelteでのイベントの操作
• Svelteのクロスコンポーネント状態管理
• スクリプトモジュールの外部でSapperのURLパラメータにアクセスする方法
• SvelteでCSSを動的に適用する方法
• SapperでURLにリダイレクトする方法
• Svelteテンプレートでforループをシミュレートする方法