面试题：Svelte中如何在插槽传递数据并在嵌套组件中使用

Question

请描述在Svelte中，如何将数据从父组件通过插槽传递给子嵌套组件，并在子嵌套组件中正确使用这些数据。请提供简单的代码示例说明。

Answer 1

在Svelte中，可以通过具名插槽（named slots）来将数据从父组件传递给子嵌套组件。以下是具体步骤及代码示例：

1. 父组件代码：

<script>
    let data = { message: 'Hello from parent' };
</script>

<ChildComponent>
    <div slot="customSlot" let:data={data}>
        {data.message}
    </div>
</ChildComponent>

2. 子组件（ChildComponent）代码：

<script>
    // 子组件无需特别声明接收数据，插槽会处理
</script>

<slot name="customSlot" {data}>
    <!-- 默认内容，如果父组件没有填充具名插槽 -->
    No data provided
</slot>

在上述代码中：

• 父组件定义了一个数据对象data，并通过具名插槽customSlot将data传递给子组件。
• 子组件使用<slot>标签，并指定name为customSlot，同时通过解构的方式在插槽的默认内容中可以访问到传递过来的data。如果父组件没有填充该具名插槽，子组件会显示默认内容No data provided。