16

Author: kossiecoder

src/components/KossieCoder.vue

@@ -1,15 +1,27 @@
 <template>
     <div>
+        <h1>{{ title }}</h1>
         <p>{{ name }}</p><br>
         <button @click="updateName">Change Name</button>
     </div>
 </template>
 
 <script>
 export default {
+    props: {
+        title: {
+            type: String,
+            default: 'default title'
+        },
+        name: {
+            type: String,
+            default: 'default name'
+        },
+
+    },
     data() {
         return {
-            name: 'Kossie Coder',        
+            // name: 'Kossie Coder',        
         }
     },
 

src/views/About.vue

@@ -11,6 +11,6 @@ import KossieCoder from '@/components/KossieCoder.vue';
 export default {
   components: {
     KossieCoder
-  }  
+  },
 }
 </script>

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h1>This is Home page</h1>
-    <KossieCoder />
+    <KossieCoder title="home title" name="Kossie Coder"/>
   </div>
 </template>