【前端】Svelte：匿名插槽与具名插槽
Svelte 中的插槽（slot）功能提供了组件内部的内容占位符，使得父组件能够动态插入内容，从而实现高度灵活的组件设计。本文将介绍 Svelte 的匿名插槽和具名插槽，讲解它们的使用方式与适用场景，帮助你在项目中实现灵活的内容插入。
什么是插槽
在 Svelte 中，插槽可以理解为组件内部的一个占位符，允许父组件在插槽位置插入自定义内容。Svelte 支持两种插槽类型：
- 匿名插槽：适用于简单的内容插入，不需要指定插槽名称。
- 具名插槽：适用于复杂布局，可以插入多个不同区域的内容。
插槽机制让组件更具复用性与灵活性，尤其在构建布局和 UI 组件时，插槽是非常有用的工具。
匿名插槽
匿名插槽是 Svelte 中最基础的插槽类型。使用匿名插槽时，子组件中只需要简单地定义一个 <slot> 标签，父组件可以直接将内容传递给该插槽。
创建一个包含匿名插槽的组件
以下是一个简单的卡片组件 Card.svelte，它提供一个匿名插槽，允许父组件插入自定义内容。
<!-- src/Card.svelte -->
<div class="card">
<slot></slot>
</div>
<style>
.card {
padding: 20px;
background-color: #f4f4f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
在 Card.svelte 中，<slot></slot> 定义了一个匿名插槽，表示父组件可以将内容插入到这个位置。
使用匿名插槽
在主组件 App.svelte 中引入并使用 Card 组件。
<!-- src/App.svelte -->
<script>
import Card from './Card.svelte';
</script>
<main>
<h1>Welcome to My App</h1>
<Card>
<p>This is a card with dynamic content!</p>
</Card>
</main>
<style>
main {
padding: 20px;
font-family: Arial, sans-serif;
}
</style>
在 App.svelte 中，我们将 <p>This is a card with dynamic content!</p> 作为 Card 组件的子内容传递。这个内容将会替代 Card.svelte 中的 <slot> 占位符，从而实现了自定义内容的插入。
匿名插槽的适用场景
匿名插槽适用于简单的组件，如按钮、卡片或提示框，只需要父组件提供一段内容填充。例如，一个 Modal 组件可以使用匿名插槽让用户定义弹窗的内容。
具名插槽
当一个组件需要多个内容区域时，匿名插槽显得不够灵活。Svelte 提供了具名插槽，可以通过名称来定义不同的插槽位置，允许父组件在不同的插槽中插入内容。
创建一个包含具名插槽的组件
以下是一个具有具名插槽的 Panel.svelte 组件，它包含 header 和 footer 插槽，让父组件分别插入不同的内容。
<!-- src/Panel.svelte -->
<div class="panel">
<header>
<slot name="header">Default Header</slot>
</header>
<section>
<slot></slot>
</section>
<footer>
<slot name="footer">Default Footer</slot>
</footer>
</div>
<style>
.panel {
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
margin: 10px 0;
}
header, footer {
font-weight: bold;
color: #333;
}
</style>
在 Panel.svelte 中，我们定义了两个具名插槽 header 和 footer，并提供默认内容。<slot name="header"> 和 <slot name="footer"> 分别代表顶部和底部内容区域，而 <slot> 表示匿名插槽，用于插入主体内容。
使用具名插槽
在 App.svelte 中使用 Panel 组件，并为 header 和 footer 插槽传递自定义内容。
<!-- src/App.svelte -->
<script>
import Panel from './Panel.svelte';
</script>
<main>
<Panel>
<h2 slot="header">Custom Header</h2>
<p>This is the main content of the panel.</p>
<p slot="footer">Custom Footer</p>
</Panel>
</main>
<style>
main {
padding: 20px;
}
</style>
在这里，使用 slot="header" 和 slot="footer" 属性将内容传递给 Panel 组件的具名插槽。Custom Header 将会替换 Panel.svelte 中 header 插槽的默认内容，Custom Footer 替换 footer 插槽内容，而主体 <p>This is the main content of the panel.</p> 会填充到匿名插槽中。
具名插槽的适用场景
具名插槽适合于复杂布局的组件，例如导航栏、弹窗或面板，它们通常包含多个区域。通过具名插槽，可以灵活地自定义每个区域的内容，而不影响其他部分的内容布局。
默认插槽内容
在具名插槽中，可以为插槽提供默认内容。当父组件没有为特定插槽提供内容时，将显示默认内容。
例如，Panel.svelte 中的 header 和 footer 具名插槽已经设置了默认值。如果在使用该组件时没有传入内容，则显示这些默认内容：
<!-- 如果没有传入 header 和 footer 插槽内容 -->
<Panel>
<p>This is the main content only.</p>
</Panel>
结果：
header会显示Default Header- 主体内容显示
This is the main content only. footer显示Default Footer
总结
Svelte 的匿名插槽和具名插槽功能大大增强了组件的灵活性：
- 匿名插槽：适用于简单内容插入，只需要一个内容区域。
- 具名插槽：适用于多区域内容插入，使得组件结构更加清晰，内容插入更灵活。
通过掌握插槽的使用，你可以在 Svelte 中创建高度自定义的组件，为应用开发提供更强的复用性与拓展性。