如何从组件内部获取对 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

将在父项中设置的引用作为 prop 传递给子项时，可以在组件本身内部使用它 > 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>

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

How to get a reference to a Svelte component from within the component

javascript

svelte

svelte-3

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

App.svelte

Component.svelte