Svelte - 访问子组件的方法

Question

我有一个简单地隐藏内容的应用程序Hidden.svelte：

<script>
    let shown = false;

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

<svelte:options accessors={true}/>

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

家长App.svelte：

<script>
    import Hidden from 'Hidden';

    let child;
</script>

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

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

因此，shown由于<svelte:options accessors={true}/>在父母中，可以轻松设置孩子的

但是，我想使用方法，show()因为它不仅可以设置shown值，还可以执行一些魔术

感谢 Chrome 的 DevTools，我发现所有组件都有一个Arraywith属性和方法，可以通过 some 访问.$$.ctx，因此show()可以像这样调用Hidden 的方法：

<button on:click={() => child.$$.ctx[2]()}>Show</button>

但是）你知道）有没有合法的方法来做到这一点？

Answer 1

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>

child.show()实际上可以简化对 的调用，但我认为这可能会使弄清楚示例中发生的事情变得更加困难。你可以这样做：

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