Add Component composition > Context for vue2

README.md

@@ -274,7 +274,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/vue.svg" />
             <b>Vue 2</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -290,12 +290,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox

content/4-component-composition/5-context/vue2/App.vue

@@ -0,0 +1,35 @@
+<script>
+import UserProfile from "./UserProfile.vue";
+
+export default {
+  components: { UserProfile },
+  provide() {
+    return {
+      user: Object.assign(this.user, {
+        updateUsername: this.updateUsername,
+      }),
+    };
+  },
+  data() {
+    return {
+      user: {
+        id: 1,
+        username: "unicorn42",
+        email: "[email protected]",
+      },
+    };
+  },
+  methods: {
+    updateUsername(newUsername) {
+      this.user.username = newUsername;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h1>Welcome back, {{ user.username }}</h1>
+    <UserProfile />
+  </div>
+</template>

content/4-component-composition/5-context/vue2/UserProfile.vue

@@ -0,0 +1,16 @@
+<script>
+export default {
+  inject: ["user"],
+};
+</script>
+
+<template>
+  <div>
+    <h2>My Profile</h2>
+    <p>Username: {{ user.username }}</p>
+    <p>Email: {{ user.email }}</p>
+    <button @click="() => user.updateUsername('Jane')">
+      Update username to Jane
+    </button>
+  </div>
+</template>