s8e111 callbacks

section-code/src/components/User.vue

@@ -6,7 +6,11 @@
         <hr>
         <div class="row">
             <div class="col-xs-12 col-sm-6">
-                <app-user-detail :name="name" @nameWasReset="name = $event"></app-user-detail>
+                <app-user-detail
+                        :name="name"
+                        @nameWasReset="name = $event"
+                        :resetFn="resetName"
+                ></app-user-detail>
             </div>
             <div class="col-xs-12 col-sm-6">
                 <app-user-edit></app-user-edit>
@@ -29,6 +33,9 @@
             changeName(){
               this.name = "TyrelSouza"
             },
+            resetName(){
+                this.name = 'Tyrel';
+            }
         },
         components: {
             appUserDetail: UserDetail,

section-code/src/components/UserDetail.vue

@@ -2,8 +2,9 @@
     <div class="component">
         <h3>You may view the User Details here</h3>
         <p>Many Details</p>
-        <p>User Name: {{ name }}</p>
+        <p>User Name: {{ switchName() }}</p>
         <button @click="resetName">Reset Name</button>
+        <button @click="resetFn()">Reset Name Fn</button>
     </div>
 </template>
 
@@ -12,9 +13,15 @@
         props: {
             name: {
                 type: String,
+            },
+            resetFn: {
+                type: Function
             }
         },
         methods: {
+            switchName(){
+                return this.name.split("").reverse().join("");
+            },
             resetName(){
                 this.name = 'Tyrel';
                 this.$emit('nameWasReset', this.name)