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

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>

演示 REPL

编辑

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

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

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

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>  

演示 2 REPL