vue源码解读--作用域插槽(parse和codegen)

目录导航

本节示例代码如下

parse

    父组件


        根据之前的分析,我们知道,文本节点会调用chars方法进行处理,在当前示例即对{{ slotProps.msg }}进行解析,解析后的值如下

vue源码解读--作用域插槽(parse和codegen)_第1张图片

由之前分析可知,每次匹配到闭合标签都会执行closeElement函数,进入processElement函数并在该函数中对slot进行解析,这将执行processSlotContent函数,本次template标签存在故进入判断

vue源码解读--作用域插槽(parse和codegen)_第2张图片

        执行getAndRemoveAttrByRegex函数获取v-slot属性描述对象,即

vue源码解读--作用域插槽(parse和codegen)_第3张图片

        执行getSlotName函数获取slot名称,从分类上来说,只有两种:命名的slot和默认的slot,我们当前未指定slot,故当前应为default

          接着框红的位置向el节点上添加属性描述

vue源码解读--作用域插槽(parse和codegen)_第4张图片

        即

vue源码解读--作用域插槽(parse和codegen)_第5张图片

        回到processElement函数,继续向下,由于此时已经存在slotScope,故进入判断,向节点添加scopedSlots,值为ast节点

vue源码解读--作用域插槽(parse和codegen)_第6张图片

    故父组件的ast tree如下

vue源码解读--作用域插槽(parse和codegen)_第7张图片

    子组件


         子组件slot的解析会执行processSlotOutlet和processSlotContent函数,但是当前的slot无name属性,故不会像el节点上添加标记

vue源码解读--作用域插槽(parse和codegen)_第8张图片

    codegen

      父组件


        还是根据之前分析,我们知道codegen过程最核心的是genElement和gendata函数,这是一次递归的过程。我们知道在parse阶段已经添加了scopedSlots属性并且它的值是ast节点,故本次gendata进入if判断

         调用genScopedSlots拼接_u函数

vue源码解读--作用域插槽(parse和codegen)_第9张图片

        故父组件的code如下

    子组件


    根据上一节分析,在tag为slot的情况下,会进入genSlot函数,拼接_t函数,即renderslot函数。故子组件的code如下

你可能感兴趣的:(vue源码解读--作用域插槽(parse和codegen))