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

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

编辑

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

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

像下面这样的东西会更多'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>

Demo 2 REPL

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

How to call destroy on a component from inside the component?

svelte

svelte-component

编辑