javascript - Svelte-访问子组件的方法

我有一个简单地隐藏内容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>

因此，由于 parent 中的shown，可以轻松设置 child 的<svelte:options accessors={true}/>
但是，我想使用show()方法，因为它不仅可以设置shown值，而且可以执行一些魔术操作

在Chrome的DevTools中，我发现所有组件都有一个带有 Prop 和方法的Array，可以通过一些.$$.ctx进行访问，因此可以这样调用Hidden的show()方法:

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

但是)你知道)有合法的方法吗？

最佳答案

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>

关于javascript - Svelte-访问子组件的方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61333755/