Svelte - доступ к методу дочернего компонента - PullRequest
Новая
       3

Svelte - доступ к методу дочернего компонента

1 голос
/ 21 апреля 2020

У меня есть приложение, которое просто скрывает содержимое 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, но и выполнить некоторые маги c

Thx до Chrome DevTools, я обнаружил, что все компоненты имеют Array с реквизитами и методами, к которым можно получить доступ через некоторые .$$.ctx, поэтому метод show() Hidden можно вызвать так: 

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

Но) Вы знаете) Есть ли законный способ сделать это?

1 Ответ

4 голосов
/ 21 апреля 2020

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