时间戳

首页 > 解决方案 > 如何调用 svelte:component 当前组件方法？

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

问题描述

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

标签： svelte

解决方案

您可以使用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}" />

推荐阅读