在上篇文章中详细介绍了普通插槽的渲染流程juejin.cn/post/686679…
现在来分析一下作用域插槽,其老版本的使用:cn.vuejs.org/v2/guide/co…
父组件编译:processSlotContent
这里截取了部分内容
父组件中的标签中添加了slot-scope属性后,给该节点添加slotScope属性,
当然,也要添加slot属性,如果没有的话就默认为default。
子组件编译
与普通插槽相同 juejin.cn/post/686679…
genData -> genScopedSlots
在编译的时候给父组件中的AST结点上添加了slotScope属性,在codegen的过程中会调用genScopedSlots函数,生成含_u()函数的代码。
这一步是普通插槽编译过程所没有的。
generateSlot:
generateSlots遍历slots对象,返回一个字符串,然后如上所示与[]拼接成数组,最后作为参数传入_u()函数
渲染:Vue.prototype._render
利用normalizeScopedSlots函数,将占位符节点的data属性中的scopedSlots值添加到子组件的实例上。
由编译过程可知,scopedSlots就是{key:"",fn:function(el.slotTarget){//...略}}形式
normalizeScopedSlots与normalizeScopedSlot
normalizeScopedSlots作用就是返回res对象,其key为slotTarget,value为fn
这里的fn非编译时产生的fn,normalizeScopedSlots会调用normalizeScopedSlot,返回一个名为normalized的函数
renderSlot
这里的scopedSlotFn是normalizeScopedSlot函数返回一个名为normalized的函数。
normalized引用了真正的generateSlot函数产生的fn。
正式因为返回的是一个函数,而非普通vnode,所有可以在调用scopedSlotFn后将子组件的数据传给这个函数。从而可以在父组件中去到子组件的值。