Svelte - 액세스 하위 구성 요소의 메서드

Svelte - 액세스 하위 구성 요소의 메서드

나는 단순히 내용을 숨기는 앱을 가지고 있다:

<script>
    let shown = false;

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

<svelte:options accessors={true}/>

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

부모:

<script>
    import Hidden from 'Hidden';

    let child;
</script>

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

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

그래서 부모님의 영향으로 아이의 것을 쉽게 설정할 수 있다

하지만 메소드는 가치를 설정할 수 있을 뿐만 아니라 마법을 부릴 수 있기 때문에 사용하고 싶습니다

Chrome의 DevTools 덕분에, 나는 모든 컴포넌트들이 일부를 통해 접근할 수 있는 소품들과 메소드들을 가지고 있다는 것을 알게 되었고, 그래서 Hidden의 메소드는 다음과 같이 부를 수 있다:

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

에의 통화는 실제로 단순화될 수 있지만, 이로 인해 예제에서 무슨 일이 일어나고 있는지 파악하는 것이 더 어려워질 수 있다고 생각했습니다. 할 수 있는 일은 다음과 같습니다:

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