From f9b796cabef44bb936099568f49c22345e43405a Mon Sep 17 00:00:00 2001
From: Stephane <stephane-vanraes@users.noreply.github.com>
Date: Sat, 26 Jun 2021 20:09:49 +0200
Subject: [PATCH] Add tutorial for component binding (#5009)

Closes #5008

Co-authored-by: Stephane Vanraes <stephane.vanraes@fjordline.com>
Co-authored-by: pngwn <pnda007@gmail.com>
---
 .../14-component-this/app-a/App.svelte        |  5 +++++
 .../14-component-this/app-a/InputField.svelte |  9 +++++++++
 .../14-component-this/app-b/App.svelte        |  9 +++++++++
 .../14-component-this/app-b/InputField.svelte |  9 +++++++++
 .../06-bindings/14-component-this/text.md     | 19 +++++++++++++++++++
 5 files changed, 51 insertions(+)
 create mode 100644 site/content/tutorial/06-bindings/14-component-this/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
 create mode 100644 site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
 create mode 100644 site/content/tutorial/06-bindings/14-component-this/text.md

diff --git a/site/content/tutorial/06-bindings/14-component-this/app-a/App.svelte b/site/content/tutorial/06-bindings/14-component-this/app-a/App.svelte
new file mode 100644
index 0000000000..41a6a10d3d
--- /dev/null
+++ b/site/content/tutorial/06-bindings/14-component-this/app-a/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	import InputField from './InputField.svelte';
+</script>
+
+<InputField />
diff --git a/site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte b/site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
new file mode 100644
index 0000000000..e2b04b93ed
--- /dev/null
+++ b/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} />
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte b/site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte
new file mode 100644
index 0000000000..f14332b398
--- /dev/null
+++ b/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>
diff --git a/site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte b/site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
new file mode 100644
index 0000000000..e2b04b93ed
--- /dev/null
+++ b/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} />
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/14-component-this/text.md b/site/content/tutorial/06-bindings/14-component-this/text.md
new file mode 100644
index 0000000000..00af193604
--- /dev/null
+++ b/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.
\ No newline at end of file