Svelte嵌套组件

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