added positoin renderslots

Author: lishiwen

example/slots-simple/App.js

@@ -11,9 +11,13 @@ export default {
       SlotInstance,
       {},
       // 在Slot Children设置Slot Component, 期望可以在内部显示出来
-      h("span", {}, "这是插入的内容")
+      {
+        header: h("span", {}, "Header"),
+        footer: h("span", {}, "Footer"),
+      }
     );
     return h("div", {}, [Bar, Slot]);
   },
+
   setup() {},
 };

example/slots-simple/Slot.js

@@ -3,7 +3,11 @@ import { h, renderSlots } from "../../lib/m-vue.esm.js";
 export default {
   render() {
     const originalContent = h("div", {}, "这是原来的内容");
-    return h("div", {}, [originalContent, renderSlots(this.$slots)]);
+    return h("div", {}, [
+      renderSlots(this.$slots, "header"),
+      originalContent,
+      renderSlots(this.$slots, "footer"),
+    ]);
   },
   setup() {},
 };

lib/m-vue.cjs.js

@@ -191,7 +191,14 @@ const ComponentPublicInstanceHandlers = {
 };
 
 function initSlots(instance, instanceChildren) {
-    instance.slots = isArray(instanceChildren) ? instanceChildren : [instanceChildren];
+    let slots = {};
+    if (isStructObject(instanceChildren)) {
+        for (const key in instanceChildren) {
+            const slot = instanceChildren[key];
+            slots[key] = isArray(slot) ? slot : [slot];
+        }
+    }
+    instance.slots = slots;
 }
 
 function promiseEmit() { }
@@ -329,8 +336,10 @@ function h(type, props, children) {
     return createVNode(type, props, children);
 }
 
-function renderSlots(slots) {
-    return createVNode('span', null, slots);
+function renderSlots(slots, renderName) {
+    if (hasOwnProperty(slots, renderName)) {
+        return createVNode('span', null, slots[renderName]);
+    }
 }
 
 exports.createApp = createApp;

lib/m-vue.esm.js

@@ -187,7 +187,14 @@ const ComponentPublicInstanceHandlers = {
 };
 
 function initSlots(instance, instanceChildren) {
-    instance.slots = isArray(instanceChildren) ? instanceChildren : [instanceChildren];
+    let slots = {};
+    if (isStructObject(instanceChildren)) {
+        for (const key in instanceChildren) {
+            const slot = instanceChildren[key];
+            slots[key] = isArray(slot) ? slot : [slot];
+        }
+    }
+    instance.slots = slots;
 }
 
 function promiseEmit() { }
@@ -325,8 +332,10 @@ function h(type, props, children) {
     return createVNode(type, props, children);
 }
 
-function renderSlots(slots) {
-    return createVNode('span', null, slots);
+function renderSlots(slots, renderName) {
+    if (hasOwnProperty(slots, renderName)) {
+        return createVNode('span', null, slots[renderName]);
+    }
 }
 
 export { createApp, createComponentInstance, createVNode, h, patch, render, renderSlots, setupComponent };

src/runtime-core/componentSlots.ts

@@ -1,5 +1,12 @@
-import { isArray } from "../shared/type";
+import { isArray, isStructObject } from "../shared/type";
 
 export function initSlots(instance, instanceChildren) {
-    instance.slots = isArray(instanceChildren) ? instanceChildren : [instanceChildren];
+    let slots = {};
+    if (isStructObject(instanceChildren)) {
+        for (const key in instanceChildren) {
+            const slot = instanceChildren[key];
+            slots[key] = isArray(slot) ? slot : [slot];
+        }
+    };
+    instance.slots = slots;
 };

src/runtime-core/helper/renderSlots.ts

@@ -1,5 +1,8 @@
+import { hasOwnProperty } from "../../shared/index";
 import { createVNode } from "../createVNode";
 
-export function renderSlots(slots) {
-    return createVNode('span', null, slots);
+export function renderSlots(slots, renderName) {
+    if (hasOwnProperty(slots, renderName)) {
+        return createVNode('span', null, slots[renderName]);
+    }
 }