以编程方式获取Svelte组件实例

Question

是否可以在组件文件之外获取组件实例？

例如，如果我使用const myComponent = new Component(options)以编程方式创建组件，则可以访问其实例并调用方法，例如myComponent.$set(props)。

是否可能在任何组件作用域之外获取某个深度嵌套组件的实例？

无论是通过id（dom类svelte-someid）获取还是在组件内部获取它（并使用它创建组件实例引用的全局注册表）。

- Maciej Krawczyk

---

似乎在另一个 Svelte 组件上使用 bind:this，例如 <Component bind:this={instance} />，将绑定其实例，但是在组件容器本身上使用 bind:this，例如 <div class="my-component" bind:this={instance}></div>，将绑定 DOM 节点，这是有道理的。但是如何在组件内获取组件自己的实例呢？ - Maciej Krawczyk

从编译后的代码来看，似乎没有办法从外部获取这个。此外，CSS ID 只是用于 CSS，因此它们不是唯一的，同一组件的实例将具有相同的类。 无论如何，我认为我不需要这个，而且很可能有一个很好的理由没有实现它。 - Maciej Krawczyk

Answer 1

由于该问题日益受到关注且没有答案，我将尝试回答。我不知道有更好的方法来解决这个问题。

基本上，在上层范围内定义一个对象作为组件注册表，并在上下文中公开它。然后，您可以从包含实例的父组件向注册表添加实例。

App.svelte

<script>
    import { setContext, onMount } from 'svelte';
    
    import Parent from './Parent.svelte';
    
    const components = { };
    
    setContext('components', components);
    
    onMount(() => {
        components.child1.message = 'Child 1';
        components.child2.message = 'Child 2';
    })
</script>

<Parent></Parent>

Parent.svelte

<script>
    import { onMount, getContext } from 'svelte';
    import Child from './Child.svelte';
    
    let child1, child2;
    
    const components = getContext('components');
    
    onMount(() => {
        components.child1 = child1;
        components.child2 = child2;
    })
</script>

<Child bind:this={child1}></Child>
<Child bind:this={child2}></Child>

Child.svelte

<svelte:options accessors/>

<script>
    export let message = '';
</script>

<p>Child: {message}</p>

REPL

- Maciej Krawczyk