面试题：Svelte的Slot与响应式数据结合实现动态可配置UI组件

Question

假设你要开发一个可动态切换展示内容的卡片组件，使用Svelte的Slot来承载不同类型的内容（如文本、图片等），同时通过响应式数据控制展示哪个Slot内容。请阐述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 定义组件结构：创建一个Svelte组件，在组件内部使用 {#if} 语句根据响应式数据来决定展示哪个 slot。
2. 响应式数据：声明一个响应式变量来控制展示内容。这个变量可以通过外部传入或者在组件内部维护。
3. Slot 使用：在组件模板中定义不同的 slot，每个 slot 用于承载不同类型的内容。

关键代码片段

<script>
    let showText = true; // 响应式变量，控制展示文本还是图片
    const toggleContent = () => {
        showText = !showText;
    };
</script>

<button on:click={toggleContent}>切换内容</button>

{#if showText}
    <slot name="text">
        <p>默认文本内容</p>
    </slot>
{:else}
    <slot name="image">
        <img src="default-image.jpg" alt="默认图片">
    </slot>
{/if}

在使用该组件时：

<CardComponent>
    <div slot="text">这是自定义文本</div>
    <img slot="image" src="custom-image.jpg" alt="自定义图片">
</CardComponent>