add method to emit a NewFriend

vue-cli-01-a-new-vue-project/src/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <header><h1>My Friends</h1></header>
-        <new-friend></new-friend>
+        <new-friend @add-contact="addContact"></new-friend>
         <ul>
             <friend-contact
                 v-for="friend in friends"
@@ -46,6 +46,9 @@ export default {
             );
             identifiedFriend.isFavorite = !identifiedFriend.isFavorite;
         },
+        addContact(NewFriend) {
+            this.friends.push(NewFriend);
+        },
     },
 };
 </script>

vue-cli-01-a-new-vue-project/src/components/NewFriend.vue

@@ -1,21 +1,47 @@
 <template>
-    <form>
+    <form @submit.prevent="submitData">
         <div>
             <label>Name: </label>
-            <input type="text" />
+            <input type="text" v-model="enteredName" />
         </div>
         <div>
             <label>Phone: </label>
-            <input type="tel" />
+            <input type="tel" v-model="enteredPhone" />
         </div>
         <div>
             <label>Email: </label>
-            <input type="email" />
+            <input type="email" v-model="enteredEmail" />
         </div>
         <div><button>Add Contact</button></div>
     </form>
 </template>
 
 <script>
-export default {};
+export default {
+    emits: ["add-contact"],
+    data() {
+        return {
+            enteredName: "",
+            enteredPhone: "",
+            enteredEmail: "",
+        };
+    },
+    methods: {
+        submitData() {
+            const person = {
+                id: new Date().toISOString(),
+                name: this.enteredName,
+                phone: this.enteredPhone,
+                email: this.enteredEmail,
+                isFavorite: false,
+            };
+            this.$emit(
+                "add-contact",
+                person
+                //this.enteredPhone,
+                //this.enteredEmail
+            );
+        },
+    },
+};
 </script>