【Vue原理】Slot - 白话版

写文章不容易，点个赞呗兄弟 专一 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工做原理，源码版助于了解内部详情，让咱们一块儿学习吧 研究基于 Vue版本 【2.5.17】

若是你以为排版难看，请点击 下面连接 或者 拉到 下面关注公众号也能够吧

【Vue原理】Slot - 白话版

插槽做为组件一个重要的部分，在项目中也是常常会用到的，起到自定义组件的做用。

插槽，按照处理方式，我以为大概能够分为两种，一种是普通插槽，一种是做用域插槽

普通插槽，就是不给名字的默认插槽和 具名插槽

做用域插槽，就是使用子做用域数据的插槽

接下来，咱们简单解释一下插槽的处理流程，主要理解思想和流程

---

普通插槽

下面以默认插槽来讲，就是不给名字的插槽

父组件中使用组件 test，而且使用插槽

子组件 test 模板

一、父组件先解析，把 test 当作子元素处理，把 插槽当作 test 的子元素处理，生成这样的节点

{    
    tag: "div",    
    children: [{        
        tag: "test",        
        children: ['插入slot 中']
    }]
}

插槽的节点就是上面的

['插入slot 中']

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

大概意思像 解析成下面

{    
    tag: "main",    
    children: [
        '我在子组件里面',
        _t('default')
    ]
}

三、这个 _t 函数，传入 'default ' 参数并执行

由于这里不给名字，默认插槽，因此是default，若是给了名字，就传入你的名字

这个函数的做用，是把第一步解析获得的插槽节点拿到，而后返回

那么子组件的节点就完整了，插槽也成功认了爹

{    
    tag: "main",    
    children: ['我在子组件里面','插入slot 中']
}

---

做用域插槽

父组件中使用 test 组件，test 组件使用做用域插槽

子组件 test 模板

子组件的数据

一、父组件先解析，把 test 当作子元素处理，把 插槽包装成一个函数，保存给节点

大概意思是这样，为了便于理解主要思想，实际操做要复杂不少

{    
    tag: "div",    
    children: [{        
        tag: "test"
        scopeSlots:{            
            default(slotProps){                
                return ['插入slot 中' + slotProps]
            }
        }
    }]
}

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

{    
    tag: "main",    
    children: [
        '我在子组件里面',
        _t('default',{child:11})
    ]
}

这个 _t 函数，和普通插槽 的同样，可是你能够看到，多传了一个参数 { child:11 }

为何多一个参数？由于这是做用域插槽啊，子组件要传给插槽的数据啊

_t 函数执行的时候，获得两个参数

一、插槽函数名字 default

二、须要的做用域数据 { child:11 }

_t 内部执行

一、根据传入的名字（'default'），拿到第一步解析插槽获得的函数（代号为A）

二、执行A，传入参数 { child:11 }

function A(slotProps){    
    return ['插入slot 中' + slotProps]
}

因而做用域插槽，就拿到了子组件传过来的数据了

插槽函数执行，会返回解析后的插槽节点，_t 拿到这个节点，直接 return 出去

因而子组件插槽就完成替换 slot 占位符了，变成下面这样

{    
    tag: "main",    
    children: [
        '我在子组件里面',
        _t('default',{child:11})
    ]
}

变成下面这样

{    
    tag: "main",    
    children: [
        '我在子组件里面', 
        '插入slot 中 {child:11}'
    ]
}