Skip to main content

Part 3 / Advanced bindings / Binding to component instances

Just as you can bind to DOM elements, you can bind to component instances themselves. For example, we can bind the instance of <InputField> to a variable named field in the same way we did when binding DOM Elements

App.svelte
<script>
	import InputField from './InputField.svelte';

	let field;
</script>

<InputField bind:this={field} />

Now we can programmatically interact with this component using field.

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

Note that we can't do {field.focus} since field is undefined when the button is first rendered.

Next: Classes

1
2
3
4
5
6
7
8
9
10
11
<script>
	import InputField from './InputField.svelte';
</script>
 
<InputField />
 
<button>
	Focus field
</button>
initialising