Vue slot原理分析一

Vue中插槽可以分为两种

• 普通插槽，就是不给名字的默认插槽和具名插槽
• 作用域插槽，就是使用子作用域数据的插槽

1.普通插槽

<!-- 场景设置 -->
<!-- 父组件 -->
<div>
    <test>我是slot中的内容</test>
</div>
<!-- 子组件:test -->
<main>
    我在子组件中
    <slot></slot>
</main>
1
2
3
4
5
6
7
8
9
10

普通插槽解析流程，父组件先解析，将test作为子组件处理，生成这样的节点

{
    tag: 'div',
    children: [{
        tag: 'test',
        children: ['插入slot中']
    }]
}
1
2
3
4
5
6
7

子组件解析，slot作为一个占位符，会被解析成一个函数

// 子组件被解析成这样
{
    tag: 'main',
    children: [
        '我在子组件里面',
        // 不传递插槽的名称默认就是default, 如果传了就是传入的名称
        _t('default')
    ]
}
1
2
3
4
5
6
7
8
9

2.作用域插槽

<!-- 场景设置 -->
<!-- 父组件 -->
<div>
    <test>
        <template slot-scope="slotProps">
            插入slot中{{slotProps}}
        </template>
    </test>
</div>
<!-- 子组件:test -->
<main>
    我在子组件中
    <slot :child="child"></slot>
</main>

data() {
    return { child: 111 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

主要的解析流程如下：

1. 父组件先解析

{
    tag: 'div',
    children: [{
        tag: 'test',
        scopeSlots: {
            default(slotProps) {
                return ['插入slot中' + slotProps]
            }
        }
    }]
}
1
2
3
4
5
6
7
8
9
10
11

2. 子组件解析，slot作为一个占位符，会被解析成一个函数

{
    tag: 'main',
    children: [
        '我在子组件中',
        // 这里的{ child: 111 }就是传递给插槽中的数据
        _t('default', { child: 111 })
    ]
}
1
2
3
4
5
6
7
8

最终会解析成

{
    tag: 'main',
    children: [
        '我在子组件里面', 
        '插入slot 中 {child:11}'
    ]
}
1
2
3
4
5
6
7