面试题：Svelte插槽Slot机制基础应用

Question

在Svelte中，创建一个包含具名插槽的父组件 `Parent.svelte`，其中有两个具名插槽 `header` 和 `content`。再创建一个子组件 `Child.svelte`，并在 `Parent.svelte` 中使用 `Child.svelte`，将 `Child.svelte` 的内容正确插入到 `Parent.svelte` 的相应具名插槽中，请写出完整代码。

Answer 1

Parent.svelte

<script>
</script>

<div>
    <slot name="header"></slot>
    <slot name="content"></slot>
</div>

Child.svelte

<script>
</script>

<Parent>
    <div slot="header">这是header插槽内容</div>
    <div slot="content">这是content插槽内容</div>
</Parent>

注意

在实际使用时，确保 Parent.svelte 和 Child.svelte 在同一项目环境且引入关系正确。上述代码仅为展示具名插槽的基本使用，若要运行还需搭建完整的Svelte项目环境。