Svelte 嵌套組件

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

現(xiàn)在，我們?cè)谙路较蚰故玖?nbsp;2 個(gè)文件，?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>

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

讓我們向 ?App.svelte? 添加一個(gè) ?<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/>

請(qǐng)注意，盡管?Nested.svelte?有一個(gè)?<p>?元素，但?App.svelte?的樣式并沒有泄露進(jìn)去。

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