Writing an article is not easy, click a like brother focus on Vue source code sharing, the article is divided into vernacular version and source version, vernacular version to help understand the working principle, source version to help understand internal details, let us study together based on Vue version [2.5.17]

If you think the layout is ugly, please click the link below or pull to the following public account can also be

Vue principle Slot-vernacular version

As an important part of components, slots are often used in projects to customize components.

Slot, according to the way of processing, I think it can probably be divided into two kinds, one is normal slot, one is scoped slot

Normal slots are default slots and named slots that do not give names

A scope slot is a slot that uses sub-scope data

Next, we briefly explain the processing flow of slots, mainly to understand the idea and flow

Ordinary slot

The following is the default slot, which is not given a name

The test component is used in the parent component and a slot is used

Child component Test template

1. The parent component parses test as a child element and the slot as a child element of test to generate such a node

{    
    tag: "div",    
    children: [{        
        tag: "test",        
        children: ['Insert into slot']]}}Copy the code

The node of the slot is the top one

['Insert into slot']
Copy the code

2. Slot is parsed as a placeholder and is parsed as a function

The general meaning is as follows

{    
    tag: "main",    
    children: [
        'I'm in the child component',
        _t('default')]}Copy the code

3. The _t function is passed the ‘default ‘argument and executed

Because they don’t give you a name, the default slot, so it’s default, if you give it a name, you pass it your name

This function takes the slot node parsed in the first step and returns it

The node of the child component is complete and the slot is successfully identified

{    
    tag: "main",    
    children: ['I'm in the child component'.'Insert into slot']}Copy the code

Scope slot

The test component is used in the parent component and the test component uses the scope slot

Child component Test template

Data for child components

1. The parent component parses test first, treats it as a child element, wraps the slot into a function, and stores it to the node

In order to understand the main idea, the actual operation is much more complicated

{    
    tag: "div",    
    children: [{        
        tag: "test"
        scopeSlots:{            
            default(slotProps){                
                return ['Insert into slot' + slotProps]
            }
        }
    }]
}
Copy the code

2. Slot is parsed as a placeholder and is parsed as a function

{    
    tag: "main",    
    children: [
        'I'm in the child component',
        _t('default',{child:11})
    ]
}
Copy the code

The _t function is the same as the normal slot function, but as you can see, it passes an extra argument {child:11}.

Why an extra parameter? Because this is the scoped slot, the data that the child component passes to the slot

When the _t function executes, it takes two arguments

1. The slot function name is default

2, need scope data {child:11}

_t internal execution

1, based on the name passed in (‘default’), get the function (code name A) from the first parsing slot.

{child:11}

function A(slotProps){    
    return ['Insert into slot' + slotProps]
}
Copy the code

So the scope slot gets the data from the child component

The slot function returns the parsed slot node. _t takes this node and returns directly

The child component slot is then finished replacing the slot placeholder, as follows

{    
    tag: "main",    
    children: [
        'I'm in the child component',
        _t('default',{child:11})]} becomes {tag:"main",    
    children: [
        'I'm in the child component'.'Insert into slot {child:11}']}Copy the code