Svelte组件开发：如何为{#each}块传递Props并复用传参

你的代码核心问题出在{#each}块的写法上——你用{array}把传入的数组包装成了一个对象，导致遍历的是对象的键值对而非数组元素。以下是修正后的完整实现：

修正后的Assignment组件 #

<script>
    // 接收父组件传入的数组Prop，设置默认值避免空值报错
    export let array = [];
</script>

<div class="flex-column">
    <div class="row-item">
        <h4>Open</h4>
        <!-- 直接使用array变量，无需额外大括号；添加key提升渲染性能 -->
        {#each array as value (value.id)}
            <div class="description">
                <p>{value.status}</p>
                <p>{value.name}</p>
            </div>
        {:else}
            <!-- 可选：数组为空时的提示 -->
            <p>No assignments</p>
        {/each}
    </div>
</div>

父组件调用（无需修改） #

你的父组件调用写法是正确的，Svelte的{myArray}是array={myArray}的简写，能正确将数组传递给子组件：

<div class="flex-container">
    <Assignment {myArray} />
    <Assignment {myArray2} />
</div>

关键说明 #

• {#each}的语法是{#each 数组变量 as 元素 [, 索引] (key)}，直接使用定义好的array变量即可，不要用大括号包裹。
• 添加(value.id)是为了给每个遍历项指定唯一key，让Svelte在数组变化时更高效地更新DOM；如果没有id字段，也可以用其他唯一标识（不推荐用索引，因为索引会随数组元素位置变化而改变）。
• 给array设置默认值[]，可以避免父组件未传参或传参为undefined时出现遍历错误。

内容的提问来源于stack exchange，提问作者Malthe22