【Vue原理】Slot-源码版之作用域插槽 写文章不容易，点个赞呗兄弟专注Vue源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】Slot-源码版之作用域插槽今天探索Slot的另一部分，作用域插槽。首先，设置一个模板例子image把子组件的child传给插槽image父组件会解析成下面的渲染函数with(this){return_c('div',{},[_c('test',{scopedSlots:_u([{key:"default",fn:function(slotProps){return["我是放在组件的slot:"+slotProps]}}])})],1)}其中，_u是resolveScopedSlots，Vue会给每个实例都注册一个_u
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
。作用主要是把数组变成对象map并返回看下resolveScopedSlots源码给每个实例注册_uimagefunctionresolveScopedSlots(fns,res){res=res||{};for(vari=0;i
流程
快递问题件怎么处理流程河南自建厂房流程下载关于规范招聘需求审批流程制作流程表下载邮件下载流程设计
1、插槽函数保存到外壳节点之前的父渲染函数，子组件的插槽解析成一个节点处理函数，如下，然后作为scopedSlots保存在test组件的外壳节点上{tag:'test',data:{scopedSlots:{//插槽包装成的函数default:function(slotProps){return["我是放在组件的slot:"+slotProps]}}},children:["我是放在组件的slot:11"]}2、插槽函数另存为然后，test组件会创建自身实例，并且初始化，在初始化的过程中，会把外壳节点上的$scopedSlots另存为到本实例上，方便后面子组件解析内部模板直接调用//这个函数作用是，执行渲染函数，得到组件节点Vue.prototype._render=function(){varvm=this;varref=vm.$options;//_parentVnode就是外壳节点var_parentVnode=ref._parentVnode;if(_parentVnode){vm.$scopedSlots=_parentVnode.data.scopedSlots||{};}...省略N多执行渲染函数的代码vm.$vnode=_parentVnode;returnvnode};3、子组件解析内部看下子组件模板，绑定了child在slot上，用于传给插槽image执行子组件解析成的渲染函数如下with(this){return_c('main',["我在子组件里面",_t("default",null,{child:child})],2)}其中，child会从子组件上获取，所以child是11渲染函数中，看到子组件中的slot的占位标签如下被解析成了一个_t函数（怎么解析的话，又是一篇，太多先不说）_t('default',null,{child:child})看下_t，他是renderSlot，上一篇文章提过。这个方法，会兼容处理作用域Slot和普通Slot，上篇文章省略了处理作用域Slot的代码，现在看一下functionrenderSlot(name,fallback,props){//看了上面，所以可以从实例上获取$scopedSlotsvarscopedSlotFn=this.$scopedSlots[name];varnodes;if(scopedSlotFn){props=props||{};//开始执行插槽函数nodes=scopedSlotFn(props);}returnnodes}_t的作用是，执行会直接返回节点，直接替换子组件slot占位符，完成插入功能_t就是renderSlot，函数会根据【插槽名字】找到对应的【作用域Slot包装成的函数】，然后执行它，把子组件内的数据【{child:child}】子传进去于是，作用域Slot生成的函数，就接收到了子组件传入的数据啦所以作用域Slot就可以拿传入的参数进行解析了插槽怎么插入子组件_t('default',null,{child:child})执行完毕，会返回节点，这个节点就是slot解析生成的节点["我是放在组件的slot:"+{child:11}]子组件渲染函数执行完毕，生成的vnode如下{tag:'main',children:["我在子组件里面","我是放在组件的slot:{child:11}"]}作用域插槽，成功地替换了原来的占位符，当上了正宫娘娘最后，来张图看下总的流程image公众号 -全文完-
浙公网安备 33021202002483