Vue普通插槽原理分析_vue的插槽原理

1.插槽内容怎么解析的

<!-- 场景设置 -->
<!-- 父组件 -->
<div>
    <test>我是放在组件中的slot: {{name}}</test>
</div>
data() {
    return { name: 11 };
}
<!-- 子组件 -->
<main>
    我在子组件中
    <slot></slot>
</main>
1
2
3
4
5
6
7
8
9
10
11
12
13

插槽的作用域是父组件实例的作用域，比如上面的父组件会被解析成如下的渲染函数

with(this) {
    return _c('div', {}, [
        _c('test', [
            '我是放在组件中的slot' + name
        ])
    ])
}
1
2
3
4
5
6
7

上面this即指代的是父组件的实例，name就会去父组件上获取

2. 插槽怎么插入子组件

当父组件渲染完毕，会得到一个完整的VNode，上面存储着描述DOM的所有信息

{
    tag: 'div',
    children: [{
        tag: 'test',
        children: '我是放在组件中的slot:11'
    }]
}
1
2
3
4
5
6
7

从上面的VNode信息可以看出，slot其实被当做了test组建的子组件。

接下来的异步就是patch(创建DOM并插入到页面)，当Vue遍历到上面vnode的children是，遇到了test这个节点，发现没有test这种标签，认定它是一个组件后，会当做一个组件去解析

Slot转存会经过以下步骤

1. Vue.prototype._init执行，判断如果是组件则执行initInternalComponent
2. initInternalComponent吧组件的插槽节点，上面的例子中就是['我是放在组件中的slot:11'], 并传递给组件选项_renderChildren
3. initRender将上一步保存的组件选项_renderChildren放在$slot中
4. 将$slot替换到子组件，这里主要涉及到_t()函数。_t实际上是renderSlot函数

function installRenderHelpers(target) {
    target._t = renderSlot;
}

function renderSlot(name) {    
    return this.$slots[name]
}
1
2
3
4
5
6
7

最后_t('default')执行完毕，返回插槽节点，于是test组件渲染成了下面

with(this) {
    return _c('main', {
        "我在子组件里面", 
        ['我是放在组件的 slot 11']
    })
}
1
2
3
4
5
6