Svelte: Как мне вызвать функцию в дочернем компоненте после переключения на него с помощью динамического компонента?

У меня есть <svelte:component> в моем родительском компоненте, который позволяет мне переключаться между несколькими дочерними компонентами. Я хочу вызвать функцию внутри одного из дочерних компонентов. Для этого у меня есть функция в родительском компоненте, которая сначала пытается переключиться на этот дочерний компонент, а затем вызывает функцию.

App.svelte

<script>
    import First from './First.svelte'
    import Second from './Second.svelte'
    
    let selected = First;
    let child;
    
    function secondHello() {
        selected = Second;
        child.hello();
    }
</script>

...

<svelte:component this={selected} bind:this={child}/>

Второй.

<script>
    export function hello() {
        //do stuff
    }
</script>

REPL: https://svelte.dev/repl/93214917d7414741a229cd812Space / а>

Проблема в том, что когда текущий выбранный компонент не Second, функция secondHello не работает. Похоже, что для обновления child после изменения selected требуется некоторое время, в результате чего child.hello(); выдает ошибку, поскольку она не существует в другом дочернем компоненте.

Есть ли способ дождаться обновления child? Или мне следует использовать другой подход?


svelte svelte-component
person yfragment    schedule 25.06.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваше предположение верно, что child.hello() срабатывает слишком рано, поскольку Svelte еще не сбросил обновления, поэтому bind:this={child} еще не обновил child. Для подобных ситуаций Svelte предоставляет метод tick, который позволяет вам ждать, пока к DOM не будут применены какие-либо ожидающие обновления состояния:

<script>
    import { tick } from 'svelte'
    import First from './First.svelte'
    import Second from './Second.svelte'
    
    let selected = First;
    let child;
    
    function secondHello() {
        selected = Second;
        tick().then(() => child.hello());
    }
    
    // or:
    async function secondHello() {
        selected = Second;
        await tick();
        child.hello();
    }
</script>

...

<svelte:component this={selected} bind:this={child}/>

Учебник по галочке: https://svelte.dev/tutorial/tick

person dummdidumm    schedule 25.06.2021