面试题：Svelte中Slot高级应用与复杂组件复用挑战

Question

在一个大型Svelte项目中，存在多个具有相似结构但细节不同的复杂组件，需要高度复用组件代码并通过Slot实现灵活定制。要求实现以下功能：1. 子组件能接收来自父组件的不同类型数据（如字符串、对象、函数）并基于这些数据渲染不同的DOM结构。2. 父组件在复用子组件时，能对插槽内容进行动态更新且不影响子组件其他部分的状态。请阐述整体设计方案，并给出核心代码实现。

Answer 1

整体设计方案

1. 子组件设计：
   • 子组件使用 props 接收来自父组件的不同类型数据，如字符串、对象、函数等。
   • 通过 #if 或 #each 等 Svelte 指令根据接收到的数据渲染不同的 DOM 结构。
   • 利用 Svelte 的插槽机制，定义插槽用于父组件定制内容。
2. 父组件设计：
   • 在父组件中复用子组件，并传递不同类型的数据作为 props。
   • 通过 Svelte 的响应式变量动态更新插槽内容，由于 Svelte 的细粒度更新机制，不会影响子组件其他部分的状态。

核心代码实现

1. 子组件（例如 ComplexComponent.svelte）：

<script>
    export let data;
</script>

{#if typeof data ==='string'}
    <p>{data}</p>
{:else if typeof data === 'object'}
    <ul>
        {#each Object.entries(data) as [key, value]}
            <li>{key}: {value}</li>
        {/each}
    </ul>
{:else if typeof data === 'function'}
    {#await data()}
        <p>Loading...</p>
    {:then result}
        <p>{result}</p>
    {:catch error}
        <p>Error: {error.message}</p>
    {/await}
{/if}

<slot></slot>

2. 父组件（例如 App.svelte）：

<script>
    import ComplexComponent from './ComplexComponent.svelte';
    let slotContent = 'Initial slot content';
    let dataString = 'This is a string';
    let dataObject = {name: 'John', age: 30};
    let dataFunction = async () => {
        await new Promise(resolve => setTimeout(resolve, 1000));
        return 'Function result';
    };
    let changeSlotContent = () => {
        slotContent = 'Updated slot content';
    };
</script>

<button on:click={changeSlotContent}>Change Slot Content</button>

<ComplexComponent {dataString}>
    {slotContent}
</ComplexComponent>

<ComplexComponent {dataObject}>
    {slotContent}
</ComplexComponent>

<ComplexComponent {dataFunction}>
    {slotContent}
</ComplexComponent>