如何从组件中获取对 Svelte 组件的引用

Question

有一种简单的方法可以从父作用域获取对子组件实例的引用，如 in the tutorial 所示。

我想要的是从组件本身中获取对组件的引用。因此，如果我们查看上面链接的官方 Svelte 演示，我的意思是我希望从 InputField 实例中引用 InputField 实例，而不是从 App.svelte。

（我想要这个的原因：我需要实例来触发外部 JS 库的钩子，这些库将以编程方式与实例交互。）

教程中的代码副本（为了方便和长寿）

App.svelte：

<script>
    import InputField from './InputField.svelte';
    let field;
</script>
<InputField bind:this={field}/>
<button on:click={() => field.focus()}>Focus field</button>

InputFiled.svelte：

<script>
    let input;
    export function focus() {
        input.focus();
    }

    // Somewhere here, I want a var, like you might imagine the following to do:
    let myself = this;
</script>
<input bind:this={input} />

Answer 1

您可以从父母那里获得参考并将其传递给孩子：

<script>
    import InputField from './InputField.svelte';
    let field;
</script>

<InputField bind:this={field} {field}/>

<button on:click={() => field.focus()}>Focus field</button>

一旦你得到该字段，就将它传递给输入

<script>
    let input;
        export let field;
    export function focus() {
        input.focus();
    }
        let myself;
        $:if(field) myself = field;
</script>
<input bind:this={input} />

你可以在上下文中使用它。

Answer 2

将在父级中设置的引用作为道具传递给子级时，可以在组件本身内部使用它> REPL

App.svelte

<script>
    import Component from './Component.svelte';
    
    let reference
        
</script>

<Component bind:this={reference} {reference}/>

Component.svelte

<script>
    
    export let reference;
    
    $: reference && console.log('reference in component', reference)

</script>