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

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

~~我很确定我们无法访问组件脚本上的函数。我没有在 API 上找到任何提示，也无法通过 devTools 找到任何方法。~~

见下方编辑

但是我们可以通过自定义事件发送函数，您可以这样解决您的需求：

App.svelte

<script>
    import A from './A.svelte'
    const syncMethods = []

    function sync() {
        syncMethods.forEach(f => f());
    }

    function storeSyncHandler(event) {
        syncMethods.push(event.detail);
    }
</script>

<button on:click={sync}>Sync Components</button>
<A on:mounted={storeSyncHandler}/>

A.svelte

<script>
    import { createEventDispatcher, onMount} from 'svelte';
    const dispatch = createEventDispatcher();

    let synced = ''

    function sync() {
        synced = '[SYNCED]';
    }

    onMount(() => {
        dispatch('mounted', sync)
    })
</script>

<div>Syncable Component {synced}</div>

child 组件使用它的 'sync' 方法发送一个 'mounted' 事件。 parent 存储它并可以在需要时调用它。希望对大家有帮助或者给点意见。

这是 REPL：https://svelte.dev/repl/6bc923a8326643cca79a6a2f8ee0ffe0?version=3.22.3

编辑：

当我们在另一个组件上导出函数时，它就像一个魅力。

这是调用挂载组件方法的工作 REPL：

https://svelte.dev/repl/8ba4270a9e334f35a591cdbfbac70e8e?version=3.22.3

Answer 2

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

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

How to call svelte:component current component method?

svelte