vue 插槽scope_Vue中的插槽解析之作用域插槽

父组件编译:processSlotContent

这里截取了部分内容

父组件中的标签中添加了slot-scope属性后，给该节点添加slotScope属性，

当然，也要添加slot属性，如果没有的话就默认为default。

子组件编译

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后将子组件的数据传给这个函数。从而可以在父组件中去到子组件的值。