From bde27a25575a77fe2ed639206baa60ea4254e1e5 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <rise33@yandex.ru>
Date: Sun, 15 Aug 2021 19:42:42 +0000
Subject: [PATCH] new type of data pushing

---
 src/App.svelte   | 16 ++++++----------
 src/Input.svelte | 20 ++++++++++----------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index f64ef10..03ce399 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -6,10 +6,10 @@
   import Card from "./Card.svelte";
   import Input from "./Input.svelte";
   //
-  let text1 = "";
-  let text2 = "";
-  const handleChange1 = value => (text1 = value); 
-  const handleChange2 = value => (text2 = value);
+  let incommingText = "";
+  function handleMessage(event) {
+    incommingText = event.detail.text;
+  }
 </script>
 
 <main>
@@ -148,12 +148,8 @@
 
       <Route path="/test">
         <Card title="Testing card1">
-          <Input onChange={handleChange1} title="Input text1" />
-          <h1>{text1}</h1>
-        </Card>
-        <Card title="Testing card2">
-          <Input onChange={handleChange2} title="Input text2" />
-          <h1>{text2}</h1>
+          <Input on:msg1={handleMessage} title="Input text1" />
+          <h1>{incommingText}</h1>
         </Card>
       </Route>
     </div>
diff --git a/src/Input.svelte b/src/Input.svelte
index a220bee..b09f55c 100644
--- a/src/Input.svelte
+++ b/src/Input.svelte
@@ -1,12 +1,12 @@
 <script>
-    export let title;
-    export let onChange;
-    const handleBlur = e => {
-      if ('function' === typeof onChange) {
-        onChange(e.target.value);
-      }
-    };
-  </script>
+  export let title;
+  let text;
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+  function sendInputText() {
+    dispatch("msg1", { text: text });
+  }
+</script>
 
 <div class="container">
   <div class="md:flex md:items-center mb-6">
@@ -14,7 +14,7 @@
       <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">{title}</label>
     </div>
     <div class="md:w-2/3">
-      <input on:input={handleBlur} class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" />
+      <input bind:value={text} on:input={sendInputText} class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" />
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>