Svelte 嵌套組件

將整個應(yīng)用程序放在一個組件中是不切實際的。相反，我們可以從其他文件導(dǎo)入組件，然后像包含元素一樣使用它們。

現(xiàn)在，我們在下方向您展示了 2 個文件，?App.svelte? 和 ?Nested.svelte?。

• App.svelte

<script>
	import Nested from './Nested.svelte';
</script>

<p>This is a paragraph.</p>
<Nested/>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

• Nested.svelte

<p>This is another paragraph.</p>

每個?.svelte?文件持有一個組件，該組件是一個可重復(fù)使用的獨立代碼塊，它封裝了 HTML、CSS 和 JavaScript，屬于一個整體。

讓我們向 ?App.svelte? 添加一個 ?<script>? 標(biāo)簽，將文件（我們的組件）?Nested.svelte? 導(dǎo)入我們的應(yīng)用程序......

<script>
	import Nested from './Nested.svelte';
</script>

...然后在?App.svelte?中使用 ?Nested? 組件。

<p>This is a paragraph.</p>
<Nested/>

請注意，盡管?Nested.svelte?有一個?<p>?元素，但?App.svelte?的樣式并沒有泄露進去。

另請注意組件名稱 ?Nested? 是大寫的。采用此約定是為了讓我們能夠區(qū)分用戶定義的組件和常規(guī) HTML 標(biāo)簽。