demo: add provide/inject demo

HeroMeiKong · Feb 12, 2021 · bc6973f · bc6973f
1 parent cf81448
commit bc6973f
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 0 deletions.
diff --git a/example/apiInject/App.js b/example/apiInject/App.js
@@ -0,0 +1,47 @@
+// 组件 provide 和 inject 功能
+import {
+  h,
+  provide,
+  inject,
+} from "../../lib/mini-vue.esm.js";
+
+const ProviderOne = {
+  setup() {
+    provide("foo", "foo");
+    provide("bar", "bar");
+    return () => h(ProviderTwo);
+  },
+};
+
+const ProviderTwo = {
+  setup() {
+    // override parent value
+    provide("foo", "fooOverride");
+    provide("baz", "baz");
+    const foo = inject("foo");
+    // 这里获取的 foo 的值应该是 "foo"
+    // 这个组件的子组件获取的 foo ，才应该是 fooOverride
+    if (foo !== "foo") {
+      throw new Error("Foo should equal to foo");
+    }
+    return () => h(Consumer);
+  },
+};
+
+const Consumer = {
+  setup() {
+    const foo = inject("foo");
+    const bar = inject("bar");
+    const baz = inject("baz");
+    return () => {
+      return h("div", {}, `${foo}-${bar}-${baz}`);
+    };
+  },
+};
+
+export default {
+  name: "App",
+  setup() {
+    return () => h("div", {}, [h("p", {}, "apiInject"), h(ProviderOne)]);
+  },
+};
diff --git a/example/apiInject/index.html b/example/apiInject/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import { createApp } from "../../../lib/mini-vue.esm.js";
+      import App from "./App.js";
+
+      const rootContainer = document.querySelector("#app");
+      createApp(App).mount(rootContainer);
+    </script>
+  </body>
+</html>