將整個應用程式放在單一元件中是不切實際的。相反地,我們可以從其他檔案匯入元件並將其包含在我們的標記中。
在 App.svelte
的頂部新增一個 <script>
標籤,該標籤匯入 Nested.svelte
...
應用程式
<script>
import Nested from './Nested.svelte';
</script>
...並包含一個 <Nested />
元件
應用程式
<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>