如何从组件内部调用组件的destroy？

我有一个模态组件，我希望能够在用户单击 x 按钮时销毁它，我还有一个通知弹出窗口，它会在一段时间后自行销毁，但我想让用户能够通过以下方式关闭它： x 按钮也是如此。 我知道我可以将事件传递给组件，但我认为如果组件具有自毁性，那就更好了。 对于这种情况也可能有更好的设计，但这就是我的想法，其他指针将不胜感激。

如果破坏是指从 DOM 中删除节点，那么您所需要做的就是使用 Svelte 获取对组件中最顶层元素的引用bind:this并使用删除所述元素Node.removeChild():

<script>
  let nodeRef
</script>

<div bind:this={nodeRef}>
  <h3>Hey I'm a component</h3>
  <button on:click={() => nodeRef.parentNode.removeChild(nodeRef)}>
    Remove me :(
  </button>
</div>

演示 REPL https://svelte.dev/repl/22d8c178f6434874b9c281bb6041d286?version=3.23.0

Edit

我没有注意到提出不同方法的要点。由于模式或通知的显示将由父组件触发（无论是来自用户操作还是作为编程响应），因此对我来说，父组件也可以处理模式或通知的关闭更自然。

您不必使用事件来处理关闭模式或通知，您只需将关闭处理程序作为 prop 传递即可。这也将使您不必自己处理节点删除（或节点创建/追加）。

像下面这样的东西会更“Svelte-like”：

应用程序.svelte

<script>
  import MyModal from './MyModal.svelte'

  let showModal = false
</script>

<div>
  {#if showModal}
    <MyModal onClose={() => showModal = false} />
  {/if}
  <button on:click={() => showModal = true}>Show Modal</button>
</div>

MyModal.svelte

<script>
  export let onClose
</script>

<div>
  <h3>Hi I'm a modal <span on:click={onClose}>X</span></h3>
</div>  

演示 2 REPL https://svelte.dev/repl/582ebe32411a44e1824d0b250c53085b?version=3