一直对Vue中的slot插槽比较感兴趣，下面是自己的一些简单理解，希望可以帮助大家更好的理解slot插槽
下面结合一个例子，简单说明slots的工作原理
dx-li子组件的template如下：
你好！
dx-ul父组件的template如下：
传递的插槽内容'hello juejin!'会被编译成dx-li子组件VNode节点的子节点。
渲染dx-li子组件，其中子组件的render函数：
函数为renderSlot函数
return _c('li',{staticClass: "dx-li" },[_vm._t("default",[_vm._v("你好 掘金！")])],2
)
},staticRenderFns: []
}
初始化dx-li子组件vue实例过程中，会调用initRender函数：
其中resolveSlots函数为：
,context: ?Component
): { [key: string]: Array } {
const slots = {}
// 判断是否有children，即是否有插槽VNode
if (!children) {
return slots
}
// 遍历父组件节点的孩子节点
for (let i = 0,l = children.length; i < l; i++) {
const child = children[i]
// data为VNodeData，保存父组件传递到子组件的props以及attrs等
const data = child.data
/* 移除slot属性
*
* 编译成span的VNode节点data = {attrs:{slot: "abc"},slot: "abc"},所以这里删除该节点attrs的slot
*/
if (data && data.attrs && data.attrs.slot) {
delete data.attrs.slot
}
/* 判断是否为具名插槽，如果为具名插槽，还需要子组件/函数子组件渲染上下文一致。主要作用：
*当需要向子组件的子组件传递具名插槽时，不会保持插槽的名字。
* 举个栗子：
* child组件template:
*
*
*
*
* parent组件template:
*
*
*
*/
if ((child.context === context || child.fnContext === context) &&
data && data.slot != null
) {
const name = data.slot
const slot = (slots[name] || (slots[name] = []))
// 这里处理父组件采用template形式的插槽
if (child.tag === 'template') {
slot.push.apply(slot,child.children || [])
} else {
slot.push(child)
}
} else {
// 返回匿名default插槽VNode数组
(slots.default || (slots.default = [])).push(child)
}
}
// 忽略仅仅包含whitespace的插槽
for (const name in slots) {
if (slots[name].every(isWhitespace)) {
delete slots[name]
}
}
return slots
}
然后挂载dx-li组件时，会调用dx-li组件render函数，在此过程中会调用renderSlot函数：
,// 子组件插槽中默认内容VNode数组，如果没有插槽内容，则显示该内容
props: ?Object,// 子组件传递到插槽的props
bindObject: ?Object // 针对 obj必须是一个对象
): ?Array {
// 判断父组件是否传递作用域插槽
const scopedSlotFn = this.$scopedSlots[name]
let nodes
if (scopedSlotFn) { // scoped slot
props = props || {}
if (bindObject) {
if (process.env.NODE_ENV !== 'production' && !isObject(bindObject)) {
warn(
'slot v-bind without argument expects an Object',this
)
}
props = extend(extend({},bindObject),props)
}
// 传入props生成相应的VNode
nodes = scopedSlotFn(props) || fallback
} else {
// 如果父组件没有传递作用域插槽
const slotNodes = this.$slots[name]
// warn duplicate slot usage
if (slotNodes) {
if (process.env.NODE_ENV !== 'production' && slotNodes._rendered) {
warn(
`Duplicate presence of slot "${name}" found in the same render tree ` +
`- this will likely cause render errors.`,this
)
}
// 设置父组件传递插槽的VNode._rendered，用于后面判断是否有重名slot
slotNodes._rendered = true
}
// 如果没有传入插槽，则为默认插槽内容VNode
nodes = slotNodes || fallback
}
// 如果还需要向子组件的子组件传递slot
/*举个栗子：
* Bar组件:
scoped slots理解
dx-li子组件的template如下：
dx-ul父组件的template如下：
其中 _vm._u函数：
调用
resolveScopedSlots(fns[i],res);
} else {
res[fns[i].key] = fns[i].fn;
}
}
return res
}
子组件的后续渲染过程与slots类似。scoped slots原理与slots基本是一致，不同的是编译父组件模板时，会生成一个返回结果为VNode的函数。当子组件匹配到父组件传递作用域插槽函数时，调用该函数生成对应VNode。
总结
其实slots/scoped slots 原理是非常简单的，我们只需明白一点vue在渲染组件时，是根据VNode渲染实际DOM元素的。
slots是将父组件编译生成的插槽VNode，在渲染子组件时，放置到对应子组件渲染VNode树中。
scoped slots是将父组件中插槽内容编译成一个函数，在渲染子组件时，传入子组件props，生成对应的VNode。最后子组件，根据组件render函数返回VNode节点树，update渲染真实DOM元素。同时，可以看出跨组件传递插槽也是可以的，但是必须注意具名插槽传递。
原文链接：https://www.f2er.com/vue/32911.html