面试题：Svelte中Slot基础用法之具名插槽问题

Question

在Svelte组件中，假设有一个父组件需要向子组件传递不同位置的内容，已知子组件通过具名插槽来接收，如何在父组件中正确使用具名插槽将内容传递到子组件对应的位置？请给出简单的代码示例。

Answer 1

1. 子组件代码（假设为 Child.svelte）

<script>
    // 无需额外逻辑，只需要定义具名插槽
</script>

<div>
    <slot name="header">默认的头部内容</slot>
    <slot>默认的主体内容</slot>
    <slot name="footer">默认的底部内容</slot>
</div>

2. 父组件代码（假设为 Parent.svelte）

<script>
    import Child from './Child.svelte';
</script>

<Child>
    <div slot="header">自定义的头部内容</div>
    <div>自定义的主体内容</div>
    <div slot="footer">自定义的底部内容</div>
</Child>

在上述代码中，父组件通过 slot 属性指定内容要插入到子组件具名插槽的位置。如果没有指定 slot 属性，内容会插入到没有名称的默认插槽中。