如何从组件内部调用组件的销毁？

Question

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

Answer 1

如果破坏是指从 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>

Demo REPL

编辑

我错过了建议不同方法的重点。由于模态或通知的显示将由父组件触发（无论是来自用户操作还是作为程序响应），所以对我来说更自然的是，父组件也会处理模态或通知的解除。

您不必使用事件来处理关闭模式或通知，您可以简单地将关闭处理程序作为道具传递。这也将使您不必自己处理节点删除（或节点创建/附加）。

类似下面的东西会更“苗条”：

App.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>  

Demo 2 REPL