Svelte如何实现点击创建组件且父组件移除时不销毁

直接用Svelte原生提供的客户端组件API就能实现，不需要额外引入第三方库，完全满足new Component(上下文数据)的调用效果，也不需要维护组件列表做循环渲染，同时能做到动态创建的组件不受父组件销毁影响。

核心实现逻辑 #

Svelte组件编译后本身就是可直接实例化的构造函数（Svelte 5 改为mount方法），只要把组件挂载到脱离当前父组件DOM树的全局节点（比如document.body）上，父组件卸载时不会触碰到这些节点，对应的组件实例自然不会被连带销毁。组件内部自己处理销毁逻辑即可，调用方不需要维护实例引用。

具体实现代码 #

以最常见的全局Toast提示场景为例：

1. 调用方代码（父组件中） #

不需要维护任何组件列表数组，触发交互时直接创建实例即可：

<script>
  // Svelte 3/4 直接导入组件就是构造函数
  import Toast from './Toast.svelte'

  function handleClick() {
    // 创建独立DOM容器，直接挂到body下，和当前父组件DOM树完全隔离
    const container = document.createElement('div')
    document.body.appendChild(container)

    // 直接实例化组件，传入需要的上下文数据
    new Toast({
      target: container,
      props: {
        content: '操作成功',
        duration: 3000
      },
      intro: true // 启用入场动画
    })
    // 不需要保存实例引用，后续逻辑由组件自身处理
  }
</script>

<button on:click={handleClick}>触发弹出提示</button>

2. 动态组件自身逻辑（Toast.svelte） #

组件内部处理自动销毁、DOM清理逻辑，不需要父组件介入：

<script>
  import { onMount } from 'svelte'
  import { fade } from 'svelte/transition'

  export let content
  export let duration = 3000
  let show = false

  onMount(() => {
    show = true
    // 到时自动触发关闭
    setTimeout(close, duration)
  })

  function close() {
    show = false
    // 等离场动画播放完成后，销毁实例、清理DOM
    setTimeout(() => {
      $destroy()
      $el.parentElement.remove()
    }, 200) // 时长和离场动画时长保持一致
  }
</script>

{#if show}
<div class="toast" transition:fade|local={{ duration: 200 }}>
  {content}
</div>
{/if}

<style>
.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 10px 20px;
  border-radius: 6px;
  background: rgba(0,0,0,0.8);
  color: #fff;
}
</style>

注意事项 #

• 挂载目标一定不要选当前父组件模板内的DOM节点，必须挂到document.body这类不会被父组件卸载影响的全局节点下，否则父组件删除时会连带把挂载节点删掉，组件会被一起销毁。
• 如果使用Svelte 5，把new Component的写法换成官方提供的mount方法即可，逻辑完全一致：

  import { mount } from 'svelte'
  // 替换原来的new Toast(...)
  mount(Toast, {
    target: container,
    props: { content: '操作成功' }
  })
  

• 如果需要给动态创建的组件传递上下文，直接在实例化参数里加context字段即可，和正常组件的上下文用法一致。
• 组件内部一定要在销毁实例后同步移除挂载的容器节点，避免DOM残留造成内存泄漏。

内容的提问来源于stack exchange，提问作者LAZ