Svelte动态组件分配更新

苗条的文件说

svelte:component元素使用指定为this属性的组件构造函数动态地呈现组件。当属性发生更改时,组件将被销毁并重新创建。

https://svelte.dev/docs/special-elements#svelte-component

所以你会得到新的实例

您发布的代码将在每次切换时创建一个新的a和B实例,这些组件各自的状态也将丢失(除非您将它们的状态保存在外部存储中)。

如果不想创建新实例并保持内部状态,可以将两个组件封装在 div 元素并切换 可见度 的css

<script>
<script lang="ts">
  import { eventData } from "./store";
  import A from "./components/A.svelte";
  import B from "./components/B.svelte";
  
  
    let element = A;

    eventData.subscribe(({ showB }) => {
        if (showB) {
            element = B;
        } else {
            element = A;
        }
    });
</script>

<div class:hide={$eventData.showB}>
  <A />
</div>
<div class:hide={!$eventData.showB}>
  <B />
</div>
<style>
  div {
    display: contents;
  }
  .hide {
    display: none;
  }
</style>

( display: contents 如上所述,当组件可见时,它将表现得好像div不在那里一样)