svelte - 如何调用 svelte :component current component method?

Question

我有这个基本的应用程序，其中一些组件具有公共(public) load 方法。对于某些操作，我想在当前 svelte:component 上调用该方法，但我不知道如何获取对组件实例的引用。如何做到这一点？

    <script>
        import router from 'page'
        import Wines from './pages/Wines.svelte'
        import Entry from './pages/Entry.svelte'
        import TitleBar from './components/TitleBar.svelte'

        let page,
            params

        router('/', () => page = Wines)
        router('/wines', () => page = Wines)
        router('/entry/:id?', (ctx, next) => {
            params = ctx.params
            next()
        }, () => page = Entry)

        async function forceSync(){
            // how to call current component instance?
        }

    </script>

    <main>
        <TitleBar on:sync-request={forceSync}></TitleBar>
        <svelte:component this={page} params={params}/>
    </main>

Answer 1

您可以使用 bind:this获取对当前组件的引用并将其分配给变量。这也适用于使用 <svelte:component> 呈现的组件所以你会组织你的代码类似于:

<script>
  import Child from './Child.svelte'

  let cmp

  const func = () => {
    // use cmp here: cmp.load()
  }
</script>

<svelte:component this="{Child}" bind:this="{cmp}" />