面试题：Svelte中Props在组件通信里的常规应用及注意点

Question

请描述在Svelte中如何通过Props进行父子组件通信，当父组件传递一个复杂对象作为Prop时，在子组件中应该如何正确接收和使用？并举例说明可能遇到的问题及解决方法。

Answer 1

在Svelte中通过Props进行父子组件通信

1. 父组件传递数据：在父组件中，通过在子组件标签上以属性的形式传递数据。例如：

<script>
  import ChildComponent from './ChildComponent.svelte';
  const myData = { name: 'John', age: 30 };
</script>

<ChildComponent {myData} />

2. 子组件接收数据：在子组件中，使用export let语句来声明接收的props。例如：

<script>
  export let myData;
</script>

<p>Name: {myData.name}, Age: {myData.age}</p>

接收和使用复杂对象作为Prop

1. 正确接收：如上述例子，使用export let声明对象类型的prop。
2. 正确使用：在子组件中可以直接访问对象的属性，就像{myData.name}这样来显示数据，或者在逻辑中使用这些属性。

可能遇到的问题及解决方法

1. 问题：对象引用问题。如果子组件意外修改了传递过来的对象，可能会影响到父组件中的数据状态，因为Svelte传递对象是按引用传递。例如：

<!-- 子组件 -->
<script>
  export let myData;
  function modifyData() {
    myData.age = 31;
  }
</script>

<button on:click={modifyData}>Modify Data</button>

这样会改变父组件中myData对象的age属性。 2. 解决方法：

• 浅拷贝：在子组件中接收时进行浅拷贝。例如：

<script>
  export let myData;
  let localData = {...myData };
  function modifyData() {
    localData.age = 31;
  }
</script>

这样修改localData不会影响父组件的myData。

• 不可变数据更新：使用immer等库来处理不可变数据更新，确保不会直接修改原始对象。例如：

<script>
  import produce from 'immer';
  export let myData;
  function modifyData() {
    myData = produce(myData, draft => {
      draft.age = 31;
    });
  }
</script>

这样虽然看起来是修改了myData，但实际上是创建了一个新的对象，并且Svelte能检测到这种变化并更新视图。