New Normal slot
Parse during compilation of the parent component
template
ast
process
conclusion
1. Execute closeElement after closing the tag, and then execute processElement to execute processSlotContent(Element).
2. First execute getAndRemoveAttrByRegex to trace the object of the el.attrsList find slot instruction.
3. If the object of the slot instruction exists, use getSlotName to obtain the slot name and dynamic. Set slotTarget of the current slot node to the slot name, slotTargetDynamic to Dynamic, and slotScope to value if there is value and empty otherwise.
ProcessSlotOutlet (tag) {processSlotOutlet (slot) {processSlotOutlet (slot); The AST of the current slot node is then returned.
5. After processElement is executed, it checks whether the current slot node has slotScope. If so, it obtains the slot name. Add a scopedSlots object to the Demo AST tree. The scopedSlots object is the slot definition named key and the slot node AST tree is value. Add the children property to the Demo AST tree as an array of each slot AST tree. Example Set the parent of the SLOT node AST tree to the Demo AST tree.
6. Finally, children is traversed through the Children tree to delete the value of the scoped slot, and children is empty.
Generate for the parent component compilation phase
code
process
conclusion
1. Execute genElement, execute genData, because demo AST node has scopedSlots. Then execute genScopedSlots.
2. GenScopedSlots. We first traverse scopedSlots to get the value corresponding to the key and call genScopedSlot. Finally concatenate the render expression of the slot.
Parent component Render & Patch
process
conclusion
1. When the parent component render, the component tag creates the placeholder vnode. The data attribute in the placeholder vnode is the data object generated by the parent component generate phase, which contains scopedSlots. Render Executes patch phase after execution.
2. Create a component when a patch is subcomponents init hooks, call createComponentInstanceForVnode incoming placeholder vnode, set the component instance _parentVnode attribute of the options for the placeholder vnode. The component then initializes initInternalComponent.
3. InitInternalComponent sets the component’s name first
Parse during compilation of child components
template
ast
process
conclusion
1. Execute closeElement after closing the tag, and then execute processElement to processSlotContent(Element). Do nothing until the processSlotContent condition is met.
2. Execute processSlotOutlet to check whether the node tag equals slot. SlotName is the value defined by the name attribute. If undefined is not set.
Generate for the child component compilation phase
code
process
conclusion
1. Execute genElement for slot with tag.
2. The genSlot function first retrieves slotName (slotName) of the node and sets it to default if no default value exists, then processes the default value if any, and finally returns the render expression with _t concatenation.
Child components render
process
conclusion
New version of scope slot
The biggest difference between a scoped slot and a normal slot is that the child component generate stage, which processes the attrs attribute and bind instruction of the tag, generates a different rendering function. The slot function is then executed in the Render phase upon receiving the incoming arguments.
template
process
New version slot summary
The parent component does not generate vNodes directly during compilation and rendering. Instead, it keeps a scopedSlots object in the parent vNode’s data, storing slots with different names and their corresponding rendering functions. The render function is executed to generate vNodes only during the compilation and rendering of the subcomponents, and since it is executed in the subcomponent environment, the corresponding data scope is the subcomponent instance.
Old version of plain slot (predecessor)
template
The parent component ast
- When the AST is parsed, the slot content is parsed into the AST and inserted into children of the Demo node.
Parent component render function
Parent component Render & Patch
Subcomponents ast
Child component code
Child components render
You can see that the $slots attribute of the child render component instance gets the corresponding VNode to render according to the slot name.
Summary of old version slots
In older versions, regular slots generate vNodes during compilation and rendering of the parent component, so the data is scoped to the parent component instance, and the child component gets the rendered VNodes directly when rendering. Same as new version for scope slots.