当前位置:   article > 正文

Vue普通插槽原理分析_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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/106184?site
推荐阅读
相关标签
  

闽ICP备14008679号