vue源码解读--slot（parse和gencode）

本节的示例代码如下

$\bullet$ parse

我们知道，parse的核心是processElement函数，这将对标签属性做一次提取(加工)

$\odot$ 父组件parse

对于slot而言，将执行processSlotContent和processSlotOutlet对slot进行处理

框红一的位置判断是否使用了slot-scope指令，这是已废弃的指令，被v-slot替代，故跳过

框红三的位置才是我们本节的重点，调用getBindingAttr

框红一的位置，尝试从节点上获取:或v-bind指令，我们这里没有，故跳过

框红二的位置，通过getAndRemoveAttr拿到我们slot对应的值并转为String类型

返回processSlotContent

向el标记slotTarget，若为空字符串则取默认值default，我们知道default会插入到子组件没有name属性的slot标签中作为后备内容存在，否则标记值为获取的值(h1)

调用addAttr，向节点attrs中push一位slot相关描述

此时h1对应的el节点如下

对于p元素而言，slotTarget为undefined，故不会再进入getBindingAttr函数，也不会向attrs中push与slot相关的内容

$\odot$ 子组件

还是同样的流程，执行processElement对节点加工，本次进入processSlotOutlet将执行到if逻辑

向el节点上添加slotName属性，故最终的ast tree如下

$\bullet$ codegen

我们知道codegen阶段，最核心的函数即genElement，将对ast节点调用gendata生成code

$\odot$ 父组件

对于slot而言，由于在parse阶段给节点打上了slotTarget标记并且向attrs上push了一位成员描述slot属性，故将进入判断

（src\compiler\codegen\index.js）

框红一的位置，执行genprops,此时的data code为

框红二的位置，拼接slot:h1,此时的data code为

最终的code如下

$\odot$ 子组件

由于tag为slot，故将进入如下逻辑调用genSlot

genSlot如下

框红的位置拿到parse阶段在节点标记的slotName，即：h1;接着调用genChildren，对其子节点进行处理，因为slot标签内还可以套标签，如果存在这种情况，则递归调用genElement；最后调用_c函数，_c函数将在运行时调用。故code如下