vue源码解读--作用域插槽（parse和codegen）
目录导航
本节示例代码如下
文章图片
parse
父组件
根据之前的分析，我们知道，文本节点会调用chars方法进行处理，在当前示例即对{{ slotProps.msg }}进行解析，解析后的值如下
文章图片
由之前分析可知，每次匹配到闭合标签都会执行closeElement函数，进入processElement函数并在该函数中对slot进行解析，这将执行processSlotContent函数，本次template标签存在故进入判断
文章图片
执行getAndRemoveAttrByRegex函数获取v-slot属性描述对象，即
文章图片
执行getSlotName函数获取slot名称，从分类上来说，只有两种:命名的slot和默认的slot，我们当前未指定slot，故当前应为default
文章图片
接着框红的位置向el节点上添加属性描述
文章图片
即
文章图片
回到processElement函数，继续向下，由于此时已经存在slotScope，故进入判断，向节点添加scopedSlots，值为ast节点
文章图片
故父组件的ast tree如下
文章图片
子组件
【vue源码解读--作用域插槽（parse和codegen）】子组件slot的解析会执行processSlotOutlet和processSlotContent函数，但是当前的slot无name属性，故不会像el节点上添加标记
文章图片
codegen
父组件
还是根据之前分析，我们知道codegen过程最核心的是genElement和gendata函数，这是一次递归的过程。我们知道在parse阶段已经添加了scopedSlots属性并且它的值是ast节点，故本次gendata进入if判断
文章图片
调用genScopedSlots拼接_u函数
文章图片
故父组件的code如下
文章图片
子组件
根据上一节分析，在tag为slot的情况下，会进入genSlot函数，拼接_t函数，即renderslot函数。故子组件的code如下
文章图片
推荐阅读
- vue中学习使用非jquery|vue中学习使用非jquery 下的fullcalendar 日历的正确打开方式。
- cas|cas client登录流程源码分析
- 算法|【路径规划】基于蚁群算法求解栅格地图路径规划问题matlab源码含GUI
- 算法|【TSP问题】基于蚁群算法求解TSP问题matlab源码
- 最优化实战例子|万字长文带你了解蚁群算法及求解复杂约束问题【源码实现】
- vue|vue基础知识入门级总结
- Vue3|Vue3 新特性
- openlayer|vue+openLayers入门教程
- spring源码|spring源码-生命周期
- 刘强东卸任的背后是什么（从白手起家到退居幕后解读他的人生之路）