accept data in ActiveUser

2021-02-01 cmp-communication-assignment-problem/src/App.vue

@@ -1,13 +1,22 @@
 <template>
     <div>
         <h1>User App</h1>
-        <active-user></active-user>
+        <active-user :username="user.username" :age="user.age"></active-user>
         <user-data></user-data>
     </div>
 </template>
 
 <script>
-export default {};
+export default {
+    data() {
+        return {
+            user: {
+                username: "Peter Paul",
+                age: 18,
+            },
+        };
+    },
+};
 </script>
 
 <style></style>

2021-02-01 cmp-communication-assignment-problem/src/components/ActiveUser.vue

@@ -7,11 +7,18 @@
 
 <script>
 export default {
+    props: {
+        username: {
+            type: String,
+            required: true,
+        },
+        age: {
+            type: Number,
+            required: true,
+        },
+    },
     data() {
-        return {
-            username: "Maxi",
-            age: 18,
-        };
+        return {};
     },
 };
 </script>