面试题：Svelte中Props数据传递时如何处理对象类型的属性

Question

在Svelte组件通信中，当传递一个对象类型的Prop时，如何确保子组件能够正确接收和使用这个对象，并且在对象内容变化时子组件能响应更新？请举例说明。

Answer 1

1. 确保子组件正确接收和使用对象Prop
   • 在Svelte中，传递对象类型的Prop和传递其他类型Prop类似。父组件定义一个对象，然后将其作为Prop传递给子组件。
   • 父组件（Parent.svelte）：

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

<Child {myObject} />

• 子组件（Child.svelte）：

<script>
    export let myObject;
</script>

<p>The name is {myObject.name} and age is {myObject.age}</p>

2. 在对象内容变化时子组件能响应更新
   • Svelte使用响应式系统，默认情况下，当对象的引用发生变化时，子组件会自动更新。但如果对象内部属性变化，而引用不变，需要使用$:声明响应式变量或$set方法（在Svelte 3.33.0+版本中，对于普通对象，不需要$set也能处理一些内部变化情况）。
   • 方法一：使用$:声明响应式变量
     • 父组件（Parent.svelte）：

<script>
    import Child from './Child.svelte';
    let myObject = { name: 'John', age: 30 };
    function updateObject() {
        myObject.age++;
        // 这里需要手动触发响应式更新
        $: myObject = {...myObject };
    }
</script>

<Child {myObject} />
<button on:click={updateObject}>Update Object</button>

• 方法二：使用$set（旧版本或复杂情况）
  • 父组件（Parent.svelte）：

<script>
    import { set as $set } from'svelte/store';
    import Child from './Child.svelte';
    let myObject = { name: 'John', age: 30 };
    function updateObject() {
        $set(myObject, 'age', myObject.age + 1);
    }
</script>

<Child {myObject} />
<button on:click={updateObject}>Update Object</button>

• 在这两种情况下，当对象的age属性更新时，子组件会响应更新并显示新的值。