Svelte 嵌套组件

2023-02-20 15:53 更新

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

现在,我们在下方向您展示了 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 标签。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号