<li> <slot str="你好 掘金！"> hello juejin! </slot> </li> dx-ul父组件的template如下： <ul> <dx-li> <span slot-scope="scope"> {{scope.str}} </span> </dx-li> </ul> 结合例子和Vue源码简单作用域插槽 dx-ul父组件中template编译后，产生组件render函数： module.exports={ render:function (){ var _vm=this; var _h=_vm.$createElement; var _c=_vm._self._c||_h; return _c('ul', [_c('dx-li', { // 可以编译生成一个对象数组 scopedSlots: _vm._u([{ key: "default", fn: function(scope) { return _c('span', {}, [_vm._v(_vm._s(scope.str))] ) } }]) })], 1) }, staticRenderFns: [] }
其中 _vm._u函数：
function resolveScopedSlots ( fns, // 为一个对象数组，见上文scopedSlots res ) { res = res || {}; for (var i = 0; i < fns.length; i++) { if (Array.isArray(fns[i])) { // 递归调用 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元素。同时，可以看出跨组件传递插槽也是可以的，但是必须注意具名插槽传递。
您可能感兴趣的文章: