Add tutorial for component binding (#5009)

Closes #5008

Co-authored-by: Stephane Vanraes <stephane.vanraes@fjordline.com>
Co-authored-by: pngwn <pnda007@gmail.com>

site/content/tutorial/06-bindings/14-component-this/app-a/App.svelte

@@ -0,0 +1,5 @@
+<script>
+	import InputField from './InputField.svelte';
+</script>
+
+<InputField />

site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte

@@ -0,0 +1,9 @@
+<script>
+	let input;
+
+	export function focus() {
+		input.focus();
+	}
+</script>
+
+<input bind:this={input} />

site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte

@@ -0,0 +1,9 @@
+<script>
+	import InputField from './InputField.svelte';
+
+	let field;
+</script>
+
+<InputField bind:this={field}/>
+
+<button on:click={() => field.focus()}>Focus field</button>

site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte

@@ -0,0 +1,9 @@
+<script>
+	let input;
+
+	export function focus() {
+		input.focus();
+	}
+</script>
+
+<input bind:this={input} />

site/content/tutorial/06-bindings/14-component-this/text.md

@@ -0,0 +1,19 @@
+---
+title: 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 prop named `field` in the same way we did when binding DOM Elements
+
+```html
+<InputField bind:this={field} />
+```
+
+Now we can programmatically interact with this component using `field`.
+
+```html
+<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 and throws an error.