added slots simple-demo

lishiwen · lishiwen · commit e3c4838a37f2 · 2022-07-06T14:45:18.000+08:00
diff --git a/example/slots-simple/App.js b/example/slots-simple/App.js
@@ -0,0 +1,19 @@
+import { h } from "../../lib/m-vue.esm.js";
+import SlotInstance from "./Slot.js";
+import BarInstance from "./Bar.js";
+
+export default {
+  render() {
+    const Bar = h(BarInstance);
+
+    // NOTE: slot example
+    const Slot = h(
+      SlotInstance,
+      {},
+      // 在Slot Children设置Slot Component, 期望可以在内部显示出来
+      h("span", {}, "这是插入的内容")
+    );
+    return h("div", {}, [Bar, Slot]);
+  },
+  setup() {},
+};
diff --git a/example/slots-simple/Bar.js b/example/slots-simple/Bar.js
@@ -0,0 +1,8 @@
+import { h } from "../../lib/m-vue.esm.js";
+
+export default {
+  render() {
+    return h("div", {}, "BarComponent");
+  },
+  setup() {},
+};
diff --git a/example/slots-simple/Slot.js b/example/slots-simple/Slot.js
@@ -0,0 +1,9 @@
+import { h } from "../../lib/m-vue.esm.js";
+
+export default {
+  render() {
+    const originalContent = h("div", {}, "这是原来的内容");
+    return h("div", {}, [originalContent, this.$slots]);
+  },
+  setup() {},
+};
diff --git a/example/slots-simple/index.html b/example/slots-simple/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slots</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script src="./main.js" type="module"></script>
+</html>
diff --git a/example/slots-simple/main.js b/example/slots-simple/main.js
@@ -0,0 +1,3 @@
+import { createApp } from "../../lib/m-vue.esm.js";
+import App from "./App.js";
+createApp(App).mount(document.querySelector("#app"));

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { createApp } from "../../lib/m-vue.esm.js";`
	`2`	`+import App from "./App.js";`
	`3`	`+createApp(App).mount(document.querySelector("#app"));`