如何从组件外部调用 Svelte 组件内部的函数

Question

我创建了一个简单的 Svelte 应用程序，它有一个覆盖组件。代码总结如下，这里有一个REPL 。从菜单中选择项目后，我希望隐藏菜单并关闭叠加层。我注意到覆盖中有一个 close() 函数。可以简单地从 App.svelte 中的块内部使用 Overlay.close() 调用它吗？我习惯了 Python，因为有一个对象引用，所以这是微不足道的。

<script>
  import Overlay from 'svelte-overlay';
 
    const handleSelection = (event) => {
        console.log("Selected "+event.detail.id)
        //Hide Overlay and List component: Overlay.close()?
    }
</script>



<Overlay ... />

Answer 1

如果在函数里面添加exportOverlay.svelte

export function close() {
        if (openedState) toggle(false);
    }

并将<Overlay />组件绑定到变量

<script>
  import Overlay from 'svelte-overlay';

  let overlayComp
  
</script>

<Overlay bind:this={overlayComp} />

可以从父级调用该函数

overlayComp.close()