アプリ全体を単一のコンポーネントにまとめるのは現実的ではありません。代わりに、他のファイルからコンポーネントをインポートし、マークアップでそれを使用することができます。
<script> タグを App.svelte の上部に追加して Nested.svelte をインポートしましょう…
App
<script>
import Nested from './Nested.svelte';
</script>…そして <Nested /> コンポーネントを使用します。
App
<p>This is a paragraph.</p>
<Nested />Nested.svelte には <p> 要素がありますが、App.svelte のスタイルが適用されていないことに注目してください。
HTML 要素と区別するため、コンポーネントの名前は常に大文字で始まっています
1
2
3
4
5
6
7
8
9
10
<p>This is a paragraph.</p>
<style>
p {color: goldenrod;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>