s8e109 from child to parent

section-code/src/components/User.vue

@@ -2,11 +2,11 @@
     <div class="component">
         <h1>The User Component</h1>
         <p>I'm an awesome User!</p>
-        <button @click="changeName">Change My Name</button>
+        <button @click="changeName">Change My Name from {{name}}</button>
         <hr>
         <div class="row">
             <div class="col-xs-12 col-sm-6">
-                <app-user-detail :name="name"></app-user-detail>
+                <app-user-detail :name="name" @nameWasReset="name = $event"></app-user-detail>
             </div>
             <div class="col-xs-12 col-sm-6">
                 <app-user-edit></app-user-edit>

section-code/src/components/UserDetail.vue

@@ -2,16 +2,22 @@
     <div class="component">
         <h3>You may view the User Details here</h3>
         <p>Many Details</p>
-        <p>User Name: {{ switchName() }}</p>
+        <p>User Name: {{ name }}</p>
+        <button @click="resetName">Reset Name</button>
     </div>
 </template>
 
 <script>
     export default {
-        props: ['name'],
+        props: {
+            name: {
+                type: String,
+            }
+        },
         methods: {
-            switchName(){
-                return this.name.split("").reverse().join("");
+            resetName(){
+                this.name = 'Tyrel';
+                this.$emit('nameWasReset', this.name)
             }
         }
     }