add provide and inject

2021-07-30_composition-01-starting-setup/src/App.vue

@@ -3,7 +3,6 @@
     <user-data
       :first-name="user.firstName"
       :last-name="user.lastName"
-      :age="user.age"
     ></user-data>
     <button @click="setAge">Change Age</button>
     <div>
@@ -16,7 +15,7 @@
 </template>
 
 <script>
-import { reactive, computed, watch, ref } from 'vue';
+import { reactive, computed, watch, ref, provide } from 'vue';
 import UserData from './components/UserData';
 
 export default {
@@ -45,6 +44,8 @@ export default {
       return user.firstName + ' ' + user.lastName;
     });
 
+    provide('user-age', user.age);
+
     function setAge() {
       user.age = '25';
     }

2021-07-30_composition-01-starting-setup/src/components/UserData.vue

@@ -4,16 +4,19 @@
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
 export default {
-  props: ['firstName', 'lastName', 'age'],
+  props: ['firstName', 'lastName'],
   setup(props) {
     const userName = computed(function() {
       return props.firstName + ' ' + props.lastName;
     });
 
+    const age = inject('user-age');
+
     return {
-      userName
+      userName,
+      age
     };
   }
 };