s8e113 EVENT BUSSSSS ALL ABOARD

section-code/src/components/User.vue

@@ -2,6 +2,7 @@
     <div class="component">
         <h1>The User Component</h1>
         <p>I'm an awesome User!</p>
+        <p>I'm an awesome {{age}}!</p>
         <button @click="changeName">Change My Name from {{name}}</button>
         <hr>
         <div class="row">

section-code/src/components/UserDetail.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+    import { eventBus } from "../main"
+
     export default {
         props:{
             userAge: Number,
@@ -27,6 +29,11 @@
                 this.name = 'Tyrel';
                 this.$emit('nameWasReset', this.name)
             }
+        },
+        created(){
+            eventBus.$on('ageWasEdited', (age) => {
+                this.userAge = age;
+            })
         }
     }
 </script>

section-code/src/components/UserEdit.vue

@@ -7,12 +7,13 @@
 </template>
 
 <script>
+    import {eventBus } from "../main"
     export default {
         props: ['userAge'],
         methods: {
             editAge(){
                 this.userAge = 30;
-                this.$emit('ageWasEdited', this.userAge)
+                eventBus.$emit('ageWasEdited', this.userAge)
             }
         }
     }

section-code/src/main.js

@@ -1,7 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
 
+export const eventBus = new Vue();
+
 new Vue({
   el: '#app',
   render: h => h(App)
 })
+