Svelte动态创建组件props传参为undefined问题求助

核心问题 #

你在实例化Task组件时，没有把props放在props属性下——Svelte要求组件实例化的配置对象中，props必须嵌套在props字段里，直接传顶层属性会被忽略，导致组件内获取到undefined。

修正后的代码 #

首先修改createTodo函数中的组件实例化部分：

let todoContent: string;
let todoColor: string = "#ff0000";
let todoImportance: boolean = false; // 建议改为boolean类型，匹配checkbox的绑定逻辑

const createTodo = () => {
  // 简化逻辑：直接用三元表达式转换为目标字符串
  const importance = todoImportance ? "important" : "default";

  console.log(todoColor, todoContent, importance);

  new Task({
    target: document.querySelector('#basic-todos'),
    props: { // 必须将props放在该字段内
      todoContent,
      todoColor,
      todoImportance: importance
    }
  });
};

模板部分可保持不变，注意checkbox绑定的变量类型调整为boolean更合理：

<input type="color" id="todo-color" bind:value={todoColor} />
<input
  type="text"
  id="todo-content"
  placeholder="Todo"
  bind:value={todoContent}
/>
<input
  type="checkbox"
  name="isImportant"
  id="is-important"
  bind:checked={todoImportance}
/>
<button on:click={createTodo}>Create todo</button>

替代实现方案（更符合Svelte风格） #

在Svelte中，更推荐用声明式方式管理组件列表，而非手动实例化：

1. 维护一个todo数组，点击按钮时添加新的todo对象
2. 用{#each}循环渲染Task组件

代码示例：

<script lang="ts">
  let todoContent: string;
  let todoColor: string = "#ff0000";
  let todoImportance: boolean = false;
  let todos: Array<{content: string, color: string, importance: string}> = [];

  const createTodo = () => {
    if (!todoContent) return; // 新增空内容校验
    const importance = todoImportance ? "important" : "default";
    todos = [...todos, {
      content: todoContent,
      color: todoColor,
      importance
    }];
    // 清空输入框
    todoContent = "";
    todoImportance = false;
  };
</script>

<input type="color" id="todo-color" bind:value={todoColor} />
<input
  type="text"
  id="todo-content"
  placeholder="Todo"
  bind:value={todoContent}
/>
<input
  type="checkbox"
  name="isImportant"
  id="is-important"
  bind:checked={todoImportance}
/>
<button on:click={createTodo}>Create todo</button>

<div id="basic-todos">
  {#each todos as todo}
    <Task todoContent={todo.content} todoColor={todo.color} todoImportance={todo.importance} />
    <!-- 若Task组件props名与todo键名一致，可简写：<Task {...todo} /> -->
  {/each}
</div>

这种方式无需手动操作DOM和组件实例，契合Svelte响应式设计理念，更易维护。

内容的提问来源于stack exchange，提问作者Eli-ott