面试题：Svelte中如何实现父子组件通信并传递多级数据

Question

在Svelte中构建一个简单的父子组件结构，父组件有一个对象数据，对象内包含多级嵌套数据，要求将该对象传递给子组件，子组件能够正确接收并展示该多级嵌套数据，描述实现的关键步骤及可能用到的语法。

Answer 1

关键步骤

1. 创建父组件：
   • 在父组件中定义包含多级嵌套数据的对象。
   • 使用 {#each} 或直接传递数据的方式将对象传递给子组件。
2. 创建子组件：
   • 在子组件中定义接收数据的变量。
   • 使用合适的模板语法展示接收到的多级嵌套数据，可能会用到递归或多层 {#each} 来处理嵌套结构。

可能用到的语法

1. 父组件传递数据：
   • 在Svelte中，通过在子组件标签上以属性的形式传递数据。例如，如果子组件是 <ChildComponent>，对象数据是 parentData，则 <ChildComponent data={parentData}>。
2. 子组件接收数据：
   • 在子组件的脚本部分，使用 export let data; 来接收父组件传递过来的数据。
3. 展示多级嵌套数据：
   • 使用 {#each} 循环：如果嵌套数据是数组形式，可以使用 {#each array as item} 语法来遍历展示。对于多层嵌套的数组，可以多层嵌套 {#each}。例如：

{#each outerArray as outerItem}
  {#each outerItem.innerArray as innerItem}
    {innerItem.property}
  {/each}
{/each}

• 递归处理：对于更复杂的嵌套结构，可能需要递归组件来处理。假设子组件 NestedComponent 用于处理嵌套数据，在子组件中可以这样写：

<script>
    export let data;
</script>
{#if Array.isArray(data)}
    {#each data as item}
        <NestedComponent data={item} />
    {/each}
{:else if typeof data === 'object'}
    {#each Object.entries(data) as [key, value]}
        <p>{key}: </p>
        <NestedComponent data={value} />
    {/each}
{:else}
    {data}
{/if}

在父组件中使用 <NestedComponent data={parentNestedData}> 来启动递归展示。