【Vue原理】Slot - 白话版

栏目: 编程语言 · 发布时间: 4年前

内容简介:写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧 研究基于 Vue版本如果你觉得排版难看,请点击

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

如果你觉得排版难看,请点击 下面链接 或者 拉到 下面 关注公众号 也可以吧

【Vue原理】Slot - 白话版

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

插槽,按照处理方式,我觉得大概可以分为两种,一种是普通插槽,一种是作用域插槽

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

作用域插槽,就是使用子作用域数据的插槽

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

普通插槽

下面以默认插槽来说,就是不给名字的插槽

父组件中使用组件 test,并且使用插槽

【Vue原理】Slot - 白话版

子组件 test 模板

【Vue原理】Slot - 白话版

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

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

插槽的节点就是上面的

['插入slot 中']
复制代码

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

大概意思像 解析成下面

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

3、这个 _t 函数,传入 'default ' 参数并执行

因为这里不给名字,默认插槽,所以是default,如果给了名字,就传入你的名字

这个函数的作用,是把第一步解析得到的插槽节点拿到,然后返回

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

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

作用域插槽

父组件中使用 test 组件,test 组件使用作用域插槽

【Vue原理】Slot - 白话版

子组件 test 模板

【Vue原理】Slot - 白话版

子组件的数据

【Vue原理】Slot - 白话版

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

大概意思是这样,为了便于理解主要思想,实际操作要复杂很多

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

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

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

这个 _t 函数,和普通插槽 的一样,但是你可以看到,多传了一个参数 { child:11 }

为什么多一个参数?因为这是作用域插槽啊,子组件要传给插槽的数据啊

【Vue原理】Slot - 白话版

_t 函数执行的时候, 得到两个参数

1、插槽函数名字 default

2、需要的作用域数据 { child:11 }

_t 内部执行

1、根据传入的名字('default'),拿到第一步解析插槽得到的函数(代号为A)

2、执行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}'
    ]
}
复制代码
【Vue原理】Slot - 白话版

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

美铁之战

美铁之战

[英]帕特里克·蒂利 / 黑曜、超侠 / 百花文艺出版社 / 2018-9 / 44.80元

本书的故事发生在未来,一场核战毁灭了北美大陆上的人类文明,残存下来的人类分化成两拨:生活在地面上退化到刀耕火种时代的平原人;躲藏在地下苟延残喘的沙穴人。几百年后,当保留着战前文明的沙穴人尝试着登上地面,和平原人的同室操戈将不可避免地上演……一起来看看 《美铁之战》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具