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

Question

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

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

是否可以在任何组件范围之外获取某些深层嵌套组件的实例？

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

Answer 1

由于这个问题越来越受欢迎并且没有答案，我将尝试回答它。我不知道有更好的方法来做到这一点。

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

应用程序.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>

父母.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>

儿童苗条

<svelte:options accessors/>

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

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

REPL