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

目录导航

本节的示例代码如下

parse

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

    父组件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相关的内容

---

            子组件

---

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

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

---

     codegen

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

         父组件

---

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

（src\compiler\codegen\index.js）

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

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

                最终的code如下

---

         子组件

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

        genSlot如下

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