好资源导航 » 文章资讯 » 深入浅析Vue中的slots/scoped slots

深入浅析Vue中的slots/scoped slots

2023-09-14 13:55:05 76

一直对Vue中的slot插槽比较感兴趣，下面是自己的一些简单理解，希望可以帮助大家更好的理解slot插槽

下面结合一个例子，简单说明slots的工作原理

dx-li子组件的template如下：



你好！


dx-ul父组件的template如下：


hellojuejin!


结合上述例子以及vue中相关源码进行分析
dx-ul父组件中template编译后，生成的组件render函数：
module.exports={
render:function(){
var_vm=this;
var_h=_vm.$createElement;
var_c=_vm._self._c||_h;
//其中_vm.v为createTextVNode创建文本VNode的函数
return_c('ul',
[_c('dx-li',[_vm._v("hellojuejin!")])],
1)
},
staticRenderFns:[]
}

传递的插槽内容'hellojuejin!'会被编译成dx-li子组件VNode节点的子节点。

渲染dx-li子组件，其中子组件的render函数：

module.exports={
render:function(){
var_vm=this;
var_h=_vm.$createElement;
var_c=_vm._self._c||_h;
//其中_vm._v函数为renderSlot函数
return_c('li',
{staticClass:"dx-li"},
[_vm._t("default",[_vm._v("你好掘金！")])],
2
)
},
staticRenderFns:[]
}

初始化dx-li子组件vue实例过程中，会调用initRender函数：

functioninitRender(vm){
...
//其中_renderChildren数组，存储为'hellojuejin!'的VNode节点；renderContext一般为父组件Vue实例
这里为dx-ul组件实例
vm.$slots=resolveSlots(options._renderChildren,renderContext);
...
}

其中resolveSlots函数为：

/**
*主要作用是将childrenVNodes转化成一个slots对象.
*/
exportfunctionresolveSlots(
children:?Array,
context:?Component
):{[key:string]:Array}{
constslots={}
//判断是否有children，即是否有插槽VNode
if(!children){
returnslots
}
//遍历父组件节点的孩子节点
for(leti=0,l=children.length;i
*编译成span的VNode节点data={attrs:{slot:"abc"},slot:"abc"},所以这里删除该节点attrs的slot
*/
if(data&&data.attrs&&data.attrs.slot){
deletedata.attrs.slot
}
/*判断是否为具名插槽，如果为具名插槽，还需要子组件/函数子组件渲染上下文一致。主要作用：
*当需要向子组件的子组件传递具名插槽时，不会保持插槽的名字。
*举个栗子：
*child组件template:
*
*
*

*parent组件template: * *main组件template: *foo *此时main渲染的结果： *

*foo

*/ if((child.context===context||child.fnContext===context)&& data&&data.slot!=null ){ constname=data.slot constslot=(slots[name]||(slots[name]=[])) //这里处理父组件采用template形式的插槽 if(child.tag==='template'){ slot.push.apply(slot,child.children||[]) }else{ slot.push(child) } }else{ //返回匿名default插槽VNode数组 (slots.default||(slots.default=[])).push(child) } } //忽略仅仅包含whitespace的插槽 for(constnameinslots){ if(slots[name].every(isWhitespace)){ deleteslots[name] } } returnslots }

然后挂载dx-li组件时，会调用dx-li组件render函数，在此过程中会调用renderSlot函数：

exportfunctionrenderSlot(
name:string,//子组件中slot的name，匿名default
fallback:?Array,//子组件插槽中默认内容VNode数组，如果没有插槽内容，则显示该内容
props:?Object,//子组件传递到插槽的props
bindObject:?Object//针对obj必须是一个对象
):?Array{
//判断父组件是否传递作用域插槽
constscopedSlotFn=this.$scopedSlots[name]
letnodes
if(scopedSlotFn){//scopedslot
props=props||{}
if(bindObject){
if(process.env.NODE_ENV!=='production'&&!isObject(bindObject)){
warn(
'slotv-bindwithoutargumentexpectsanObject',
this
)
}
props=extend(extend({},bindObject),props)
}
//传入props生成相应的VNode
nodes=scopedSlotFn(props)||fallback
}else{
//如果父组件没有传递作用域插槽
constslotNodes=this.$slots[name]
//warnduplicateslotusage
if(slotNodes){
if(process.env.NODE_ENV!=='production'&&slotNodes._rendered){
warn(
`Duplicatepresenceofslot"${name}"foundinthesamerendertree`+
`-thiswilllikelycauserendererrors.`,
this
)
}
//设置父组件传递插槽的VNode._rendered，用于后面判断是否有重名slot
slotNodes._rendered=true
}
//如果没有传入插槽，则为默认插槽内容VNode
nodes=slotNodes||fallback
}
//如果还需要向子组件的子组件传递slot
/*举个栗子：
*Bar组件:

*Foo组件： *main组件：

hello

*最终渲染：hello */ consttarget=props&&props.slot if(target){ returnthis.$createElement('template',{slot:target},nodes) }else{ returnnodes } }

scopedslots理解

dx-li子组件的template如下：



hellojuejin!


dx-ul父组件的template如下：



{{scope.str}}



结合例子和Vue源码简单作用域插槽
dx-ul父组件中template编译后，产生组件render函数：
module.exports={
render:function(){
var_vm=this;
var_h=_vm.$createElement;
var_c=_vm._self._c||_h;
return_c('ul',[_c('dx-li',{
//可以编译生成一个对象数组
scopedSlots:_vm._u([{
key:"default",
fn:function(scope){
return_c('span',
{},
[_vm._v(_vm._s(scope.str))]
)
}
}])
})],1)
},
staticRenderFns:[]
}

其中_vm._u函数：

functionresolveScopedSlots(
fns,//为一个对象数组，见上文scopedSlots
res
){
res=res||{};
for(vari=0;i
子组件的后续渲染过程与slots类似。scopedslots原理与slots基本是一致，不同的是编译父组件模板时，会生成一个返回结果为VNode的函数。当子组件匹配到父组件传递作用域插槽函数时，调用该函数生成对应VNode。
总结
其实slots/scopedslots原理是非常简单的，我们只需明白一点vue在渲染组件时，是根据VNode渲染实际DOM元素的。
slots是将父组件编译生成的插槽VNode，在渲染子组件时，放置到对应子组件渲染VNode树中。
scopedslots是将父组件中插槽内容编译成一个函数，在渲染子组件时，传入子组件props，生成对应的VNode。最后子组件，根据组件render函数返回VNode节点树，update渲染真实DOM元素。同时，可以看出跨组件传递插槽也是可以的，但是必须注意具名插槽传递。
                
            
              
            
                                    上一篇
java实现微信公众号发送模版消息
                
                                    下一篇
Python实现的HMacMD5加密算法示例
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            Android中区别Drawable Bitmap Canvas Paint
                        
                                            
                            window.close(); 关闭浏览器窗口js代码的总结介绍
                        
                                            
                            Android获取手机的版本号等信息的代码
                        
                                            
                            Angular.js 实现数字转换汉字实例代码
                        
                                            
                            Yii中的relations数据关联查询及统计功能用法详解
                        
                                            
                            Springmvc restful配置遇到的小坑
                        
                                            
                            Android 如何获取手机总内存和可用内存等信息
                        
                                            
                            JavaWeb项目中springmvc和tomcat对静态文件的处理
                        
                                            
                            jQuery 3.0十大新特性最终版发布
                        
                                            
                            Yii视图CGridView实现操作按钮定义地址示例
                        
                                            
                            Android 开发系统自带语音模块应用
                        
                                            
                            全面解析PHP操作Memcache基本函数
                        
                                            
                            Android 布局文件Layout XML属性
                        
                                            
                            全面了解addEventListener和on的区别
                        
                                            
                            js计算系统当前日期是星期几的方法
                        
                                            
                            原生javascript 学习之js变量全面了解
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图