面试题：Svelte组件复用与Slot作用域插槽难题

Question

在Svelte组件复用场景下，当子组件通过作用域插槽向父组件暴露数据时，父组件如何利用这些数据进行动态展示？请详细说明实现思路，并给出关键代码片段。假设子组件的数据是一个包含用户信息的对象数组。

Answer 1

实现思路

1. 定义子组件：在子组件中，通过<slot>元素的context属性来传递包含用户信息对象数组的数据。
2. 父组件使用：父组件在使用子组件时，利用<svelte:component>或直接调用子组件标签，并使用<template>标签接收子组件传递的数据，然后使用这些数据进行动态展示。

关键代码片段

子组件（例如UserList.svelte）

<script>
    // 假设这是子组件内部的用户信息数组
    const users = [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
    ];
</script>

<slot {context: { users }}></slot>

父组件（例如App.svelte）

<script>
    let userContext;
</script>

<UserList>
    <template let:context>
        {#each context.users as user}
            <div>
                <p>Name: {user.name}</p>
                <p>Age: {user.age}</p>
            </div>
        {/each}
    </template>
</UserList>