javascript - 如何从组件内部获取对 Svelte 组件的引用

Question

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

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

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

教程中的代码副本(为了方便和长寿)

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} />

并且您可以将其与上下文一起使用。