Vue中的插槽解析之作用域插槽

1,581 阅读1分钟

在上篇文章中详细介绍了普通插槽的渲染流程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后将子组件的数据传给这个函数。从而可以在父组件中去到子组件的值。