跳到主要內容

將整個應用程式放在單一元件中是不切實際的。相反地,我們可以從其他檔案匯入元件並將其包含在我們的標記中。

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 元素。

在 GitHub 上編輯此頁面

上一個 下一個
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>