Hay una manera fácil de obtener una referencia a una instancia de un subcomponente desde el ámbito principal, como se muestra en el tutorial .
Lo que quiero es obtener una referencia al componente desde dentro del propio componente. Por lo tanto, si estuviéramos viendo la demostración oficial de Svelte vinculada anteriormente, me referiría a que quiero una referencia a la instancia de InputField desde dentro de la instancia de InputField, en lugar de App.svelte.
(La razón por la que quiero esto: necesito instancias para activar enlaces a bibliotecas JS externas que interactuarán con la instancia mediante programación).
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} />Puede obtener una referencia del padre y pasársela al hijo:
<script> import InputField from './InputField.svelte'; let field; </script> <InputField bind:this={field} {field}/> <button on:click={() => field.focus()}>Focus field</button>una vez que obtenga el campo, páselo a la entrada
<script> let input; export let field; export function focus() { input.focus(); } let myself; $:if(field) myself = field; </script> <input bind:this={input} />y puedes usarlo con contexto.
Al pasar la referencia que se establece en el padre al hijo como accesorio, es posible usarla dentro del componente mismo> REPL
<script> import Component from './Component.svelte'; let reference </script> <Component bind:this={reference} {reference}/> <script> export let reference; $: reference && console.log('reference in component', reference) </script>