面试题：Svelte父子组件交互中Props传递的常见问题及解决方法

1. 数据传递异常

问题举例：父组件向子组件传递数据时，子组件未正确接收到数据。例如，父组件有如下代码：

<script>
  let data = "Hello";
</script>

<ChildComponent {data} />

子组件代码如下：

<script>
  export let data;
  console.log(data); // 期望输出 "Hello"，但可能输出 undefined
</script>

解决方法：确保在父组件中传递的数据变量名与子组件中接收的变量名一致。同时检查数据类型，例如传递对象时，要确保对象结构在父子组件间正确传递。如果传递复杂数据结构，可在子组件使用$: console.log(data)来观察数据变化。

2. 子组件更新不及时

问题举例：父组件数据更新后，子组件没有及时响应更新。比如父组件有一个按钮，点击后更新传递给子组件的数据：

<script>
  let count = 0;
  const increment = () => {
    count++;
  };
</script>

<button on:click={increment}>Increment</button>
<ChildComponent {count} />

子组件接收count并显示：

<script>
  export let count;
</script>

<p>{count}</p>

当点击按钮时，子组件的count可能不会及时更新。

解决方法：在Svelte中，确保数据是响应式的。如果数据是对象或数组，要注意对象或数组的引用变化。例如，当更新对象时，不要直接修改对象属性，而是创建一个新的对象。对于上述count的例子，Svelte会自动检测到基本类型的变化并更新子组件。但对于复杂数据结构如数组，例如：

<script>
  let items = [1, 2, 3];
  const addItem = () => {
    // 错误方式：items.push(4); 这不会触发子组件更新
    items = [...items, 4]; // 正确方式，创建新数组，触发子组件更新
  };
</script>

<button on:click={addItem}>Add Item</button>
<ChildComponent {items} />

3. Prop默认值问题

问题举例：在子组件中设置了Prop的默认值，但在父组件传递值后，默认值仍有影响。例如子组件定义：

<script>
  export let message = "Default Message";
</script>

<p>{message}</p>

父组件传递不同值：

<script>
  let customMessage = "Custom Value";
</script>

<ChildComponent {customMessage} />

可能出现子组件没有完全采用父组件传递的值。

解决方法：仔细检查子组件接收Prop的逻辑。在上述例子中，确保export let message没有其他逻辑干扰它接收父组件传递的值。如果有复杂逻辑，可在$: 块中处理Prop的初始化和更新逻辑，确保默认值只在父组件未传递值时生效。

星途面试题库

面试题：Svelte父子组件交互中Props传递的常见问题及解决方法

知识考点

面试题答案

1. 数据传递异常

2. 子组件更新不及时

3. Prop默认值问题