Svelte – access child component’s method

Hidden.svelte

<script>
    let shown = false;

    export function show() {
        shown = true;
    }
</script>

{#if shown}
    <slot/>
{/if}

App.svelte

<script>
    import Hidden from './Hidden.svelte';

    let child;
</script>

<Hidden bind:this={child}>
    Content
</Hidden>

<button on:click={() => child.show()}>Show</button>

The call to child.show() can actually be simplified, but I thought this could make it harder to figure out what’s going on in the example. You can do just:

<button on:click={child.show}>Show</button>