s8e112.5 sibling communication

section-code/src/components/User.vue

@@ -10,10 +10,11 @@
                         :name="name"
                         @nameWasReset="name = $event"
                         :resetFn="resetName"
+                        :userAge="age"
                 ></app-user-detail>
             </div>
             <div class="col-xs-12 col-sm-6">
-                <app-user-edit></app-user-edit>
+                <app-user-edit :userAge="age" @ageWasEdited="age = $event"></app-user-edit>
             </div>
         </div>
     </div>
@@ -27,6 +28,7 @@
         data(){
           return {
               name: "Tyrel",
+              age: 29
           }
         },
         methods: {

section-code/src/components/UserDetail.vue

@@ -2,7 +2,7 @@
     <div class="component">
         <h3>You may view the User Details here</h3>
         <p>Many Details</p>
-        <p>User Name: {{ switchName() }}</p>
+        <p>User Name: {{ switchName() }}, {{userAge}}</p>
         <button @click="resetName">Reset Name</button>
         <button @click="resetFn()">Reset Name Fn</button>
     </div>
@@ -11,6 +11,7 @@
 <script>
     export default {
         props:{
+            userAge: Number,
             name: {
                 type: String,
             },

section-code/src/components/UserEdit.vue

@@ -1,11 +1,21 @@
 <template>
     <div class="component">
-        <h3>You may edit the User here</h3>
+        <h3>You may edit the User ({{userAge}}) here</h3>
         <p>Edit me!</p>
+        <button @click="editAge">Edit Age</button>
     </div>
 </template>
 
 <script>
+    export default {
+        props: ['userAge'],
+        methods: {
+            editAge(){
+                this.userAge = 30;
+                this.$emit('ageWasEdited', this.userAge)
+            }
+        }
+    }
 </script>
 
 <style scoped>