From a949e27814e46ab3712d4fb32348f27fad4bbaba Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Sat, 11 Feb 2023 05:03:04 +0800
Subject: [PATCH] Add Component composition > Context for vue2 (#153)

---
 README.md                                     |  6 ++--
 .../5-context/vue2/App.vue                    | 35 +++++++++++++++++++
 .../5-context/vue2/UserProfile.vue            | 16 +++++++++
 3 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 content/4-component-composition/5-context/vue2/App.vue
 create mode 100644 content/4-component-composition/5-context/vue2/UserProfile.vue

diff --git a/README.md b/README.md
index a726558a..07363ca0 100644
--- a/README.md
+++ b/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
diff --git a/content/4-component-composition/5-context/vue2/App.vue b/content/4-component-composition/5-context/vue2/App.vue
new file mode 100644
index 00000000..384d721e
--- /dev/null
+++ b/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: "unicorn42@example.com",
+      },
+    };
+  },
+  methods: {
+    updateUsername(newUsername) {
+      this.user.username = newUsername;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h1>Welcome back, {{ user.username }}</h1>
+    <UserProfile />
+  </div>
+</template>
diff --git a/content/4-component-composition/5-context/vue2/UserProfile.vue b/content/4-component-composition/5-context/vue2/UserProfile.vue
new file mode 100644
index 00000000..780af1a7
--- /dev/null
+++ b/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>