Svelte中多子组件事件处理的最优实现方案（待办列表场景）

核心方案：直接传递当前循环项 #

Svelte的{#each}块自带循环作用域，你完全可以直接访问当前迭代的对象，根本不需要依赖HTML元素的id。最简洁的实现方式就是在删除按钮的点击事件里，直接把当前待办项作为参数传入处理函数。

基础示例代码 #

<script>
  let todos = [
    { id: 1, text: '完成Svelte响应式原理学习' },
    { id: 2, text: '整理项目组件文档' },
    { id: 3, text: '提交代码Review' }
  ];

  function deleteTodo(targetTodo) {
    // 通过filter生成新数组触发响应式更新，符合Svelte设计逻辑
    todos = todos.filter(todo => todo.id !== targetTodo.id);
  }
</script>

<ul>
  {#each todos as todo}
    <li>
      {todo.text}
      <button on:click={() => deleteTodo(todo)}>删除</button>
    </li>
  {/each}
</ul>

为什么这是最优解？ #

• 无额外依赖：彻底摆脱HTML id的限制，避免了id被修改、冲突的风险
• 直观高效：直接利用{#each}的作用域特性传递对象，代码逻辑清晰，没有冗余的DOM操作
• 适配Svelte响应式：通过替换数组触发更新，完全契合Svelte的响应式机制，性能表现更稳定

进阶：拆分独立子组件的场景 #

如果待办项需要拆成独立子组件（比如TodoItem.svelte），可以通过自定义事件将当前项传递回父组件：

子组件 TodoItem.svelte #

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  
  export let todo;
</script>

<li>
  {todo.text}
  <button on:click={() => dispatch('delete', todo)}>删除</button>
</li>

父组件调用 #

<script>
  import TodoItem from './TodoItem.svelte';
  let todos = [/* 待办数据 */];

  function handleDelete(e) {
    const todoToRemove = e.detail;
    todos = todos.filter(todo => todo.id !== todoToRemove.id);
  }
</script>

<ul>
  {#each todos as todo}
    <TodoItem {todo} on:delete={handleDelete} />
  {/each}
</ul>

关键注意点 #

• 确保每个待办项有唯一标识（比如id字段），这样filter才能精准定位要删除的项
• 不要直接修改原数组（比如用splice），Svelte的响应式需要通过替换数组来触发视图更新

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