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 标签。