在时间后从 DOM 中删除组件

Question

你好，伙计，所以我在 Svelte 中创建了一个组件，它应该会在一段时间后自行删除。

    <script>
    export let time;
</script>

<div class="notif">
  </div>

<style>
    
    
</style>

我该如何存档？

Answer 1

来自https://github.com/sveltejs/svelte/issues/3089

The difference in Svelte 3 is that component's can't self-destruct — there's no equivalent of this.destroy(). If a component can't destroy itself, that implies that some parent or controller must destroy it, ...

要销毁组件，可以使用 {#if} 块或调用 component.$destroy()

A REPL 与例子

<script>
    import Comp1 from './Comp1.svelte'
    import Comp2 from './Comp2.svelte'

    let showComp = true

    let compRef
</script>

{#if showComp}
<Comp1 bind:showComp time={1500} />
{/if}

<Comp2 bind:this={compRef} self={compRef} time={1500}/>

Comp1

<script>
    import {onDestroy} from 'svelte'

    export let showComp, time

    setTimeout(() => {
        showComp = false
    }, time)

    onDestroy(() => {
        console.log('successfully destroyed Comp1')
    })

</script>

COMP 1

Comp2

<script>
    import {onDestroy} from 'svelte'
    
    export let self, time

    setTimeout(() => {
        self.$destroy()
    }, time)

    onDestroy(() => {
        console.log('successfully destroyed Comp2')
    })
</script>

COMP 2

在时间后从 DOM 中删除组件

Remove Component after time itself from DOM

javascript

svelte

Comp1

Comp2