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>

因此，由于父中的<svelte:options accessors={true}/>，可以很容易地设置子级的shown

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

通过Chrome的DevTools，我发现所有组件都有一个带有道具和方法的Array，可以通过一些.$$.ctx访问，所以Hidden的show()方法可以这样调用：

<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>