From e43128f3160b185344522749ea232e8c55b2c72e Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrelsouza@gmail.com>
Date: Tue, 17 Apr 2018 21:53:02 -0400
Subject: [PATCH] s8e112.5 sibling communication

---
 section-code/src/components/User.vue       |  4 +++-
 section-code/src/components/UserDetail.vue |  5 +++--
 section-code/src/components/UserEdit.vue   | 12 +++++++++++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/section-code/src/components/User.vue b/section-code/src/components/User.vue
index e66a851..fd21a52 100644
--- a/section-code/src/components/User.vue
+++ b/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: {
diff --git a/section-code/src/components/UserDetail.vue b/section-code/src/components/UserDetail.vue
index 45e00ab..619d83b 100644
--- a/section-code/src/components/UserDetail.vue
+++ b/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>
@@ -10,7 +10,8 @@
 
 <script>
     export default {
-        props: {
+        props:{
+            userAge: Number,
             name: {
                 type: String,
             },
diff --git a/section-code/src/components/UserEdit.vue b/section-code/src/components/UserEdit.vue
index ad1b90e..0420959 100644
--- a/section-code/src/components/UserEdit.vue
+++ b/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>