Skip to content

Commit 235d951

Browse files
author
lishiwen
committed
is slots children example
1 parent b79268d commit 235d951

File tree

4 files changed

+65
-13
lines changed

4 files changed

+65
-13
lines changed

‎example/slots-simple/App.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@ import BarInstance from "./Bar.js";
55
export default {
66
render() {
77
const Bar = h(BarInstance);
8-
98
// NOTE: slot example
109
const Slot = h(
1110
SlotInstance,
1211
{},
1312
// 在Slot Children设置Slot Component, 期望可以在内部显示出来
1413
{
15-
header: h("span", {}, "Header"),
16-
footer: h("span", {}, "Footer"),
14+
header: ({ count }) => h("span", {}, "Header " + count),
15+
footer: ({ clickedNumbers }) =>
16+
h("span", {}, "Footer" + clickedNumbers),
17+
content: h("span", {}, "Original"),
1718
}
1819
);
1920
return h("div", {}, [Bar, Slot]);

‎example/slots-simple/Slot.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@ import { h, renderSlots } from "../../lib/m-vue.esm.js";
33
export default {
44
render() {
55
const originalContent = h("div", {}, "这是原来的内容");
6+
const count = 10;
7+
const clickedNumbers = 2000;
8+
69
return h("div", {}, [
7-
renderSlots(this.$slots, "header"),
10+
renderSlots(this.$slots, "header", { count }),
811
originalContent,
9-
renderSlots(this.$slots, "footer"),
12+
renderSlots(this.$slots, "content"),
13+
renderSlots(this.$slots, "footer", { clickedNumbers }),
1014
]);
1115
},
16+
1217
setup() {},
1318
};

‎lib/m-vue.cjs.js‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ function isObject(value) {
88
function isStructObject(value) {
99
return Object.prototype.toString.call(value) === "[object Object]";
1010
}
11+
function isFunction(value) {
12+
return Object.prototype.toString.call(value) === "[object Function]";
13+
}
1114
function isArray(value) {
1215
return Object.prototype.toString.call(value) === "[object Array]";
1316
}
@@ -38,6 +41,10 @@ function childrenShapeFlag(vNode) {
3841
if (isArray(vNode.children)) {
3942
vNode.shapeFlag |= 8 /* ShapeFlags.ARRAY_CHILDREN */;
4043
}
44+
// slots children
45+
if (vNode.shapeFlag & 2 /* ShapeFlags.STATEFUL_COMPONENT */ && isStructObject(vNode.children)) {
46+
vNode.shapeFlag |= 16 /* ShapeFlags.SLOT_CHILDREN */;
47+
}
4148
}
4249

4350
function hasOwnProperty(originObject, property) {
@@ -191,13 +198,21 @@ const ComponentPublicInstanceHandlers = {
191198
};
192199

193200
function initSlots(instance, instanceChildren) {
194-
instance.slots = normalizeObjectSlots(instanceChildren);
201+
if (instance.vnode.shapeFlag & 16 /* ShapeFlags.SLOT_CHILDREN */) {
202+
instance.slots = normalizeObjectSlots(instanceChildren);
203+
}
195204
}
196205
function normalizeObjectSlots(instanceChildren) {
197206
let slots = {};
198207
if (isStructObject(instanceChildren)) {
199208
for (const key in instanceChildren) {
200-
slots[key] = normalizeSlot(instanceChildren[key]);
209+
// NOTE: 这是自己增加到扩展，我需要支持slot无参数的情况
210+
if (isStructObject(instanceChildren[key])) {
211+
slots[key] = (props) => normalizeSlot(instanceChildren[key]);
212+
}
213+
if (isFunction(instanceChildren[key])) {
214+
slots[key] = (props) => normalizeSlot(instanceChildren[key](props));
215+
}
201216
}
202217
}
203218
return slots;
@@ -341,9 +356,17 @@ function h(type, props, children) {
341356
return createVNode(type, props, children);
342357
}
343358

344-
function renderSlots(slots, renderName) {
359+
function renderSlots(slots, renderName, props = {}) {
360+
var _a;
345361
if (hasOwnProperty(slots, renderName)) {
346-
return createVNode('span', null, slots[renderName]);
362+
if (isFunction(slots[renderName])) {
363+
const realSlot = (_a = slots[renderName]) === null || _a === void 0 ? void 0 : _a.call(slots, props);
364+
return createVNode('span', null, realSlot);
365+
}
366+
// NOTE: 这是自己增加到扩展，我需要支持slot无参数的情况
367+
if (isStructObject(slots[renderName])) {
368+
return createVNode('span', null, slots[renderName]);
369+
}
347370
}
348371
}
349372

‎lib/m-vue.esm.js‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ function isObject(value) {
44
function isStructObject(value) {
55
return Object.prototype.toString.call(value) === "[object Object]";
66
}
7+
function isFunction(value) {
8+
return Object.prototype.toString.call(value) === "[object Function]";
9+
}
710
function isArray(value) {
811
return Object.prototype.toString.call(value) === "[object Array]";
912
}
@@ -34,6 +37,10 @@ function childrenShapeFlag(vNode) {
3437
if (isArray(vNode.children)) {
3538
vNode.shapeFlag |= 8 /* ShapeFlags.ARRAY_CHILDREN */;
3639
}
40+
// slots children
41+
if (vNode.shapeFlag & 2 /* ShapeFlags.STATEFUL_COMPONENT */ && isStructObject(vNode.children)) {
42+
vNode.shapeFlag |= 16 /* ShapeFlags.SLOT_CHILDREN */;
43+
}
3744
}
3845

3946
function hasOwnProperty(originObject, property) {
@@ -187,13 +194,21 @@ const ComponentPublicInstanceHandlers = {
187194
};
188195

189196
function initSlots(instance, instanceChildren) {
190-
instance.slots = normalizeObjectSlots(instanceChildren);
197+
if (instance.vnode.shapeFlag & 16 /* ShapeFlags.SLOT_CHILDREN */) {
198+
instance.slots = normalizeObjectSlots(instanceChildren);
199+
}
191200
}
192201
function normalizeObjectSlots(instanceChildren) {
193202
let slots = {};
194203
if (isStructObject(instanceChildren)) {
195204
for (const key in instanceChildren) {
196-
slots[key] = normalizeSlot(instanceChildren[key]);
205+
// NOTE: 这是自己增加到扩展，我需要支持slot无参数的情况
206+
if (isStructObject(instanceChildren[key])) {
207+
slots[key] = (props) => normalizeSlot(instanceChildren[key]);
208+
}
209+
if (isFunction(instanceChildren[key])) {
210+
slots[key] = (props) => normalizeSlot(instanceChildren[key](props));
211+
}
197212
}
198213
}
199214
return slots;
@@ -337,9 +352,17 @@ function h(type, props, children) {
337352
return createVNode(type, props, children);
338353
}
339354

340-
function renderSlots(slots, renderName) {
355+
function renderSlots(slots, renderName, props = {}) {
356+
var _a;
341357
if (hasOwnProperty(slots, renderName)) {
342-
return createVNode('span', null, slots[renderName]);
358+
if (isFunction(slots[renderName])) {
359+
const realSlot = (_a = slots[renderName]) === null || _a === void 0 ? void 0 : _a.call(slots, props);
360+
return createVNode('span', null, realSlot);
361+
}
362+
// NOTE: 这是自己增加到扩展，我需要支持slot无参数的情况
363+
if (isStructObject(slots[renderName])) {
364+
return createVNode('span', null, slots[renderName]);
365+
}
343366
}
344367
}
345368

0 commit comments

Comments
 (0)