如何调用 svelte:component 当前组件方法？

Question

我有这个基本的应用程序，其中一些组件具有公共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}" />