Svelte Tabs - 不要重新加载/销毁数据

Question

我正在使用此处描述的细长标签组件：

https://svelte.dev/repl/8e68120858e5322272dc9136c4bb79cc?version=3.5.1

在两个选项卡中，我有以下苗条的模板代码：

<TabPanel>
    <Filter/>
    <div id='to-filter' class='scroll-container'>
        {#each value.items as item, i}
                <Item 
                itemFilter={item.name}  
                itemDay={item.itemDay} 
                itemMonth={item.itemMonth} 
                itemYear={item.itemYear} 
                itemCity={item.itemCity} 
                itemCountry={item.itemCountry} 
                itemVenue={item.venue}
                itemLink={item.link}
                itemDotw={itemDatesOnly[i].itemDotw}
                />
        {/each}
    </div>
</TabPanel>

每次我单击选项卡在数据之间切换时，似乎都会重新加载或重建它。如何调整选项卡组件，使其不会每次都破坏数据？

Answer 1

替换 TabPanel.svelte

中的以下代码块

{#if $selectedPanel === panel}
    <slot></slot>
{/if}

这样的：

<div hidden={$selectedPanel !== panel}>
    <slot></slot>
</div>

这将确保所有当前未激活的选项卡面板都获得hidden 属性，使它们对用户不可见，但它们将出现在 DOM 中。

这应该可以防止您的嵌套组件被重新渲染，因为当您在选项卡之间切换时它们不会被销毁和重新安装。