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