vue源码解读--作用域插槽(运行时)

目录导航

上一节我们通过分析得到了我们父子组件的code

父组件

子组件

根据函数映射表可知,_u对应resolveScopedSlots;_s对应toString;_t对应renderSlot。它们将在执行render函数时调用

vue源码解读--作用域插槽(运行时)_第1张图片

本节的示例代码继续沿用上一节

vue源码解读--作用域插槽(运行时)_第2张图片

在render的过程中将首先执行resolveScopedSlots函数,该函数拿到的实参为第一个参数数组,它的成员是一个对象,其key为default,value为fn函数,这实际上是做了一次遍历,对每一个template生成的code进行提取,它将最终生成一个对象,其key为我们在template的v-slot:后定义的值,value为每个slot生成的fn函数。并且它的结果将作为createElement函数的参数二(data)传入

vue源码解读--作用域插槽(运行时)_第3张图片

由于childSlot不是html标签,故会进入if判断创建子组件

  框红一的位置拿到组件构造器,这在vue.components阶段已经被构建

  框红二执行子组件vnode的创建,如下,这将作为children保存到父组件的vnode上

vue源码解读--作用域插槽(运行时)_第4张图片

接着走update执行patch流程进入到createChildren流程,而createChildren实际上又是对createElement的递归过程,故会进入子组件的创建过程,在render之前执行normalizeScopedSlots函数,本次的_parentVnode.data.scopedSlots是有值的

vue源码解读--作用域插槽(运行时)_第5张图片

向后执行到renderSlot函数,取到defalut对应的函数并执行

vue源码解读--作用域插槽(运行时)_第6张图片

props即在slot绑定的属性对象,其中包括了msg="msg8888",执行default函数创建文本,接着调用_v生成一个文本vnode并返回,即default的返回值是一个文本vnode。并最终将该文本vnode返回,那么renderSlot的返回值即一个由文本vnode构成的数组

接下来执行_c函数,即参数二为:[文本vnode]

则将该vnode作为children值传入到createElement函数中进行整个vnode的创建,之后正常走patch


因此,作用域插槽是在父组件中调用resolveScopedSlots获取插槽相关定义并保存在子组件的占位vnode中,在子组件处理过程中执行插槽描述对应的函数,并将props数据传入到回调函数中以达到回显的目的

你可能感兴趣的:(vue源码解读--作用域插槽(运行时))