Svelte 提供了多种组件间通信的方法，包括属性传递（props）和插槽（slots）。为了在 Svelte 应用中构建灵活且可复用的组件，理解并运用插槽至关重要。
深入理解 Svelte 插槽
Svelte 框架中的插槽机制，类似于 Vue 中的插槽，提供了一种从父组件向子组件传递内容的方式。通过插槽，你可以在子组件的模板中定义占位符，这些占位符可以被父组件传入的内容填充。
这些内容可以是纯文本、HTML 标签，甚至是其他的 Svelte 组件。使用插槽，你可以创建高度可定制和动态的组件，从而适应各种不同的使用场景。
创建基础插槽
在 Svelte 中，你可以通过在组件模板中使用 `slot` 元素来创建插槽。`slot` 元素充当父组件传递内容的占位符。默认情况下，插槽会渲染任何传递给它的内容。
以下是一个创建基础插槽的示例：
<main>
这是子组件
<slot></slot>
</main>
上述代码片段展示了一个子组件，它使用 `slot` 元素来接收来自父组件的内容。
为了将内容从父组件传递到子组件，首先需要将子组件引入到父组件中。然后，不要使用自闭合标签来渲染子组件，而要使用开始和结束标签。最后，在子组件的标签内，写入想要从父组件传递到子组件的内容。
例如：
<script>
import Component from "./Component.svelte";
</script><main>
这是父组件
<Component>
<span>这是来自父组件的消息</span>
</Component>
</main>
除了从父组件传递内容到子组件外，你还可以在插槽中设置后备或默认内容。如果父组件没有传入任何内容，那么插槽将显示此后备内容。
以下是如何传递后备内容的示例：
<main>
这是子组件
<slot>默认内容</slot>
</main>
这段代码展示了如何使用文本“默认内容”作为插槽的后备内容，当父组件没有传递任何内容时，将显示此文本。
利用 Slot Props 在插槽间传递数据
Svelte 允许你使用 slot props 将数据传递到插槽。当你想将一些数据从子组件传递到需要插入的内容时，可以使用 slot 属性。
例如：
<script>
let message="你好，父组件！"
</script><main>
这是子组件
<slot message={message}></slot>
</main>
上面的代码片段代表了一个 Svelte 组件。在 script 标签中，声明了一个变量 `message` 并赋值为文本 “你好，父组件！”。 同时，还将 message 变量通过 `message` 属性传递给 `slot`。 这使得父组件在注入内容到该插槽时可以使用 `message` 数据。
<script>
import Component from "./Component.svelte";
</script><main>
这是父组件
<Component let:message>
<div>
子组件说：{message}
</div>
</Component>
</main>
`let:message` 语法允许父组件访问子组件提供的名为 `message` 的 slot prop。 div 标签内的 `message` 变量获取的是来自 slot prop 的数据。
请注意，你不限于使用单个 slot prop，你可以根据需要传递多个 slot props：
<script>
let user = {
firstName: '张',
lastName: '三'
};
</script><main>
这是子组件
<slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>
在父组件中：
<script>
import Component from "./Component.svelte";
</script><main>
这是父组件
<Component let:firstName let:lastName>
<div>
用户的名字是：{firstName} {lastName}
</div>
</Component>
</main>
使用命名插槽
当你需要在组件中传递多个插槽时，可以使用命名插槽。命名插槽使管理各种插槽更加轻松，因为你可以为每个插槽指定唯一的名称。通过命名插槽，你可以构建具有不同布局的复杂组件。
要创建命名插槽，需要将 `name` 属性传递给 `slot` 元素：
<div>
这是子组件
<p>头部: <slot name="header"></slot></p>
<p>尾部: <slot name="footer"></slot></p>
</div>
在这个例子中，有两个命名插槽，分别名为 “header” 和 “footer”。你可以使用 `slot` 属性将内容从父组件传递到这些特定的插槽。
例如：
<script>
import Component from "./Component.svelte";
</script><main>
这是父组件
<Component>
<span slot="header">这段内容将会传递到头部插槽</span>
<span slot="footer">这段内容将会传递到尾部插槽</span>
</Component>
</main>
这段代码演示了如何使用 `slot` 属性将内容传递到命名插槽。第一个 `span` 标签使用了值为 “header” 的 `slot` 属性。这确保了 `span` 标签内的文本将渲染在 `header` 插槽中。同样的， `slot` 属性值为 “footer” 的 `span` 标签内的文本将渲染在 `footer` 插槽中。
理解插槽转发
插槽转发是 Svelte 中的一项功能，它允许你通过一个包装组件将内容从父组件传递到子组件。当你需要从不相关的组件传递内容时，这非常有用。
以下是如何使用插槽转发的示例，首先创建一个子组件：
<main>
这是子组件
<slot name="message"></slot>
</main>
接下来，创建一个包装组件：
<script>
import Component from "./Component.svelte";
</script><main>
<Component>
<div slot="message">
<slot name="wrapperMessage"></slot>
</div>
</Component>
</main>
在这段代码中，你将另一个名为 “wrapperMessage” 的命名插槽传递到了子组件的 “message” 插槽中。
然后在父组件中编写以下代码：
<script>
import Wrapper from "./Wrapper.svelte";
</script><main>
这是父组件
<Wrapper>
<div slot="wrapperMessage">
这是来自父组件的内容
</div>
</Wrapper>
</main>
在上面的结构中，由于包装组件内的 `wrapperMessage` 插槽，内容 “这是来自父组件的内容” 通过包装组件传递，并最终直接到达子组件。
Svelte 插槽让你的开发更轻松
插槽是 Svelte 中一个强大的特性，它让你能够创建高度可定制和可复用的组件。你已经学习了如何创建基本插槽、命名插槽、使用 slot props 等。通过掌握不同类型的插槽以及如何使用它们，你能够构建出动态而灵活的用户界面。