Svelte 嵌套组件

将整个应用程序放在一个组件中是不切实际的。相反，我们可以从其他文件导入组件，然后像包含元素一样使用它们。

现在，我们在下方向您展示了 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​文件持有一个组件，该组件是一个可重复使用的独立代码块，它封装了 HTML、CSS 和 JavaScript，属于一个整体。

让我们向 ​App.svelte​ 添加一个 ​<script>​ 标签，将文件（我们的组件）​Nested.svelte​ 导入我们的应用程序......

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

...然后在​App.svelte​中使用 ​Nested​ 组件。

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

请注意，尽管​Nested.svelte​有一个​<p>​元素，但​App.svelte​的样式并没有泄露进去。

另请注意组件名称 ​Nested​ 是大写的。采用此约定是为了让我们能够区分用户定义的组件和常规 HTML 标签。